diff --git a/package.json b/package.json index d9cedd1..544d516 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.1.24-7", + "version": "1.3.22-15", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/atomics/Typography/styles.tsx b/src/atomics/Typography/styles.tsx index 14280cb..a9ec41c 100644 --- a/src/atomics/Typography/styles.tsx +++ b/src/atomics/Typography/styles.tsx @@ -24,16 +24,30 @@ export const TypographyTitleStyles = styled(Typography.Title, { }} `; -export const TypographyTextStyles = styled(Typography.Text)>` +export const TypographyTextStyles = styled(Typography.Text, { + shouldForwardProp: prop => + getExcludeForwardProps( + ['noWrap', 'size'] as (keyof RdTypographyTextProps)[], + prop + ), +})>` ${({ size }) => { switch (size) { case 'small': return ` font-size: ${getComponentOrGlobalToken('Typography', 'fontSizeSM')}px; `; - // Case normal is the default size } }} + + ${({ noWrap }) => { + return ( + noWrap && + css` + text-wrap: nowrap; + ` + ); + }} `; export const TypographyParagraphStyles = styled(Typography.Paragraph, { @@ -47,7 +61,9 @@ export const TypographyParagraphStyles = styled(Typography.Paragraph, { return ( minRows && css` - min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) * Number(getComponentOrGlobalToken('Typography', 'fontSize')) * minRows}px; + min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) * + Number(getComponentOrGlobalToken('Typography', 'fontSize')) * + minRows}px; ` ); }} diff --git a/src/atomics/Typography/types.ts b/src/atomics/Typography/types.ts index 8faf32e..7322d35 100644 --- a/src/atomics/Typography/types.ts +++ b/src/atomics/Typography/types.ts @@ -27,13 +27,20 @@ type TypographyParagraphPropsExtend = TypographyBaseProps & { }; type TypographyTextPropsExtend = TypographyBaseProps & { /** - * @description The size of the text. + * If true, the text will not wrap to the next line and instead will be truncated with an ellipsis when it overflows. + * This is useful when you want to keep the text in a single line. + * @default false + */ + noWrap?: boolean; + + /** + * The size of the text. * @default "normal" */ size?: 'small' | 'normal'; /** - * @description Callback function that is triggered when the text value changes. + * Callback function that is triggered when the text value changes. * @param value The new value of the text. */ onChange?: (value: string) => void; diff --git a/src/molecules/ColorPicker/styles.tsx b/src/molecules/ColorPicker/styles.tsx index b7d00b4..9c18be2 100644 --- a/src/molecules/ColorPicker/styles.tsx +++ b/src/molecules/ColorPicker/styles.tsx @@ -1,4 +1,21 @@ import styled from '@emotion/styled'; import { ColorPicker } from 'antd'; +import { getExcludeForwardProps } from '../../utils'; +import { RdColorPickerProps } from './types'; -export const ColorPickerStyles = styled(ColorPicker)``; +export const ColorPickerStyles = styled(ColorPicker, { + shouldForwardProp: prop => + getExcludeForwardProps( + ['readonly'] as (keyof RdColorPickerProps)[], + prop + ), +})` + ${({ readonly }) => { + return ( + readonly && + ` + pointer-events: none; + ` + ); + }} +`; diff --git a/src/molecules/ColorPicker/types.ts b/src/molecules/ColorPicker/types.ts index d7899ab..a346d43 100644 --- a/src/molecules/ColorPicker/types.ts +++ b/src/molecules/ColorPicker/types.ts @@ -10,7 +10,15 @@ type ColorPickerComponentTokenExtend = {}; //#endregion //#region Define extended types -type ColorPickerPropsExtend = {}; +type ColorPickerPropsExtend = { + /** + * Determines whether the color picker should be in a read-only state. + * When set to `true`, user interactions such as selecting or changing colors are disabled. + * + * @default false + */ + readonly?: boolean; +}; //#endregion //#region Export types diff --git a/src/molecules/Divider/Divider.tsx b/src/molecules/Divider/Divider.tsx index 88f874c..26bdea7 100644 --- a/src/molecules/Divider/Divider.tsx +++ b/src/molecules/Divider/Divider.tsx @@ -2,5 +2,6 @@ import { DividerStyles } from './styles'; import { RdDividerComponent } from './types'; export const Divider: RdDividerComponent = props => { - return ; + const { disableMargin = false, ...antdProps } = props; + return ; }; diff --git a/src/molecules/Divider/styles.tsx b/src/molecules/Divider/styles.tsx index 5a309f8..8ab02d0 100644 --- a/src/molecules/Divider/styles.tsx +++ b/src/molecules/Divider/styles.tsx @@ -1,4 +1,16 @@ import styled from '@emotion/styled'; import { Divider } from 'antd'; +import { getExcludeForwardProps } from '../../utils'; +import { RdDividerProps } from './types'; +import { css } from '@emotion/react'; -export const DividerStyles = styled(Divider)``; +export const DividerStyles = styled(Divider, { + shouldForwardProp: prop => + getExcludeForwardProps(['disableMargin'] as (keyof RdDividerProps)[], prop), +})` + ${({ disableMargin }) => { + return disableMargin && css` + margin: 0; + `; + }} +`; diff --git a/src/molecules/Divider/types.ts b/src/molecules/Divider/types.ts index e5cde51..e5d1d5d 100644 --- a/src/molecules/Divider/types.ts +++ b/src/molecules/Divider/types.ts @@ -10,7 +10,13 @@ type DividerComponentTokenExtend = {}; //#endregion //#region Define extended types -type DividerPropsExtend = {}; +type DividerPropsExtend = { + /** + * If `true`, removes the default margin of the Divider. + * @default false. + */ + disableMargin?: boolean; +}; //#endregion //#region Export types diff --git a/src/molecules/Pagination/Pagination.tsx b/src/molecules/Pagination/Pagination.tsx index 7b7d63c..afab3e4 100644 --- a/src/molecules/Pagination/Pagination.tsx +++ b/src/molecules/Pagination/Pagination.tsx @@ -1,6 +1,11 @@ +import { useContext } from 'react'; +import { ConfigProvider } from '../../organisms'; import { PaginationStyled } from './styles'; import { RdPaginationComponent } from './types'; export const Pagination: RdPaginationComponent = props => { - return ; + const { pagination: defaultPaginationProps } = useContext(ConfigProvider.ConfigContext); + const { pageSizeOptions } = defaultPaginationProps || {}; + + return ; }; diff --git a/src/molecules/Select/index.tsx b/src/molecules/Select/index.tsx index d3995b0..3032930 100644 --- a/src/molecules/Select/index.tsx +++ b/src/molecules/Select/index.tsx @@ -1,2 +1,3 @@ +export * from './strategies'; export * from './Select'; export * from './types'; diff --git a/src/molecules/Select/strategies/index.ts b/src/molecules/Select/strategies/index.ts new file mode 100644 index 0000000..748a765 --- /dev/null +++ b/src/molecules/Select/strategies/index.ts @@ -0,0 +1 @@ +export * from './selectFilterOptionByLabel'; diff --git a/src/molecules/Select/strategies/selectFilterOptionByLabel.tsx b/src/molecules/Select/strategies/selectFilterOptionByLabel.tsx new file mode 100644 index 0000000..82ae4ae --- /dev/null +++ b/src/molecules/Select/strategies/selectFilterOptionByLabel.tsx @@ -0,0 +1,8 @@ +import { RdSelectProps } from '../types'; + +export const selectFilterOptionByLabel: RdSelectProps['filterOption'] = (input, option) => { + return ( + option?.props?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0 || + option?.props?.label?.toLowerCase().indexOf(input.toLowerCase()) >= 0 + ); +}; diff --git a/src/molecules/Steps/Steps.tsx b/src/molecules/Steps/Steps.tsx new file mode 100644 index 0000000..c3975f0 --- /dev/null +++ b/src/molecules/Steps/Steps.tsx @@ -0,0 +1,6 @@ +import { StepsStyles } from './styles'; +import { RdStepsComponent } from './types'; + +export const Steps: RdStepsComponent = props => { + return ; +}; diff --git a/src/molecules/Steps/index.tsx b/src/molecules/Steps/index.tsx new file mode 100644 index 0000000..8a275b5 --- /dev/null +++ b/src/molecules/Steps/index.tsx @@ -0,0 +1,2 @@ +export * from './Steps'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Steps/styles.tsx b/src/molecules/Steps/styles.tsx new file mode 100644 index 0000000..a200c84 --- /dev/null +++ b/src/molecules/Steps/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Steps } from 'antd'; + +export const StepsStyles = styled(Steps)``; diff --git a/src/molecules/Steps/types.ts b/src/molecules/Steps/types.ts new file mode 100644 index 0000000..1da7ef4 --- /dev/null +++ b/src/molecules/Steps/types.ts @@ -0,0 +1,25 @@ +import { GetProps, Steps } from 'antd'; +import { ComponentToken as StepsComponentTokenAntd } from 'antd/es/collapse/style'; + +//#region Define Ant Design types +type StepsPropsAntd = GetProps; + +//#endregion + +//#region Define extended component tokens +type StepsComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type StepsPropsExtend = {}; +//#endregion + +//#region Export types +export type RdStepsProps = StepsPropsAntd & StepsPropsExtend; + +export type RdStepsComponentToken = StepsComponentTokenAntd & StepsComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdStepsComponent = React.FC; +//#endregion diff --git a/src/molecules/Table/Table.tsx b/src/molecules/Table/Table.tsx index b3f5857..66f79a4 100644 --- a/src/molecules/Table/Table.tsx +++ b/src/molecules/Table/Table.tsx @@ -5,11 +5,23 @@ import { AnyObject } from 'antd/es/_util/type'; import { RowSortable } from './sortable'; import { TableStyledFunc } from './styles'; import { RdTableProps } from './types'; +import { useContext, useMemo } from 'react'; +import { ConfigProvider } from '../../organisms'; export const Table = ( props: RdTableProps ) => { - const { allowSort = false, onChangeSort, ...antdProps } = props; + const { allowSort = false, pagination, onChangeSort, ...antdProps } = props; + const { table: defaultTableProps } = useContext(ConfigProvider.ConfigContext); + const { pagination: defaultPagination } = defaultTableProps || {}; + + const paginationWithDefault = useMemo(() => { + return { + ...defaultPagination, + ...pagination, + }; + }, [pagination, defaultPagination]); + const TableStyled = TableStyledFunc(); if (allowSort && props.rowKey) { @@ -32,11 +44,15 @@ export const Table = ( items={dataSource.map(i => i[props.rowKey as string])} strategy={verticalListSortingStrategy} > - + ); } - return ; + return ; }; diff --git a/src/molecules/index.ts b/src/molecules/index.ts index 28b5560..996857b 100644 --- a/src/molecules/index.ts +++ b/src/molecules/index.ts @@ -9,6 +9,7 @@ export * from './Card'; export * from './Carousel'; export * from './Checkbox'; export * from './Collapse'; +export * from './ColorPicker'; export * from './DatePicker'; export * from './Divider'; export * from './Drawer'; @@ -35,6 +36,7 @@ export * from './Skeleton'; export * from './Slider'; export * from './Space'; export * from './Spin'; +export * from './Steps'; export * from './Switch'; export * from './Table'; export * from './Tabs'; diff --git a/src/molecules/types.ts b/src/molecules/types.ts index 8d1070a..bd97f3c 100644 --- a/src/molecules/types.ts +++ b/src/molecules/types.ts @@ -7,6 +7,7 @@ import { RdBadgeComponentToken } from './Badge'; import { RdBreadcrumbComponentToken } from './Breadcrumb'; import { RdButtonComponentToken } from './Button'; import { RdCardComponentToken } from './Card'; +import { RdCarouselComponentToken } from './Carousel'; import { CheckboxComponentToken } from './Checkbox'; import { RdCollapseComponentToken } from './Collapse'; import { RdColorPickerComponentToken } from './ColorPicker'; @@ -34,6 +35,7 @@ import { RdSkeletonComponentToken } from './Skeleton'; import { RdSliderComponentToken } from './Slider'; import { RdSpaceComponentToken } from './Space'; import { RdSpinComponentToken } from './Spin'; +import { RdStepsComponentToken } from './Steps'; import { RdSwitchComponentToken } from './Switch'; import { RdTableComponentToken } from './Table'; import { RdTabsComponentToken } from './Tabs'; @@ -51,7 +53,7 @@ export interface RdMoleculesTokenMap { Button?: RdButtonComponentToken; Breadcrumb?: RdBreadcrumbComponentToken; Card?: RdCardComponentToken; - // Carousel?: CarouselComponentToken; + Carousel?: RdCarouselComponentToken; // Cascader?: CascaderComponentToken; Checkbox?: CheckboxComponentToken; ColorPicker?: RdColorPickerComponentToken; @@ -95,7 +97,7 @@ export interface RdMoleculesTokenMap { // Transfer?: TransferComponentToken; Tabs?: RdTabsComponentToken; // Calendar?: CalendarComponentToken; - // Steps?: StepsComponentToken; + Steps?: RdStepsComponentToken; Menu?: RdMenuComponentToken; Modal?: RdModalComponentToken; Message?: RdMessageComponentToken; diff --git a/src/organisms/ConfigProvider/ConfigProvider.tsx b/src/organisms/ConfigProvider/ConfigProvider.tsx index f0ba0c8..30435ba 100644 --- a/src/organisms/ConfigProvider/ConfigProvider.tsx +++ b/src/organisms/ConfigProvider/ConfigProvider.tsx @@ -1,13 +1,23 @@ import { ConfigProvider as ConfigProviderAntd } from 'antd'; -import { RdConfigProviderCompoundedComponent, RdConfigProviderProps } from './types'; +import { ConfigContext } from './context'; +import { RdConfigConsumerProps } from './context/types'; +import { RdConfigProviderCompoundedComponent, RdConfigProviderInternalComponent } from './types'; -export const ConfigProviderInternal = ({ ...antdProps }: RdConfigProviderProps) => { - return ; +export const ConfigProviderInternal: RdConfigProviderInternalComponent = props => { + return ( + + + + ); }; export const ConfigProvider = ConfigProviderInternal as RdConfigProviderCompoundedComponent; -ConfigProvider.ConfigContext = ConfigProviderAntd.ConfigContext; +ConfigProvider.ConfigContext = ConfigContext; ConfigProvider.SizeContext = ConfigProviderAntd.SizeContext; ConfigProvider.config = ConfigProviderAntd.config; ConfigProvider.useConfig = ConfigProviderAntd.useConfig; diff --git a/src/organisms/ConfigProvider/configs/pagination.ts b/src/organisms/ConfigProvider/configs/pagination.ts new file mode 100644 index 0000000..f1c28bd --- /dev/null +++ b/src/organisms/ConfigProvider/configs/pagination.ts @@ -0,0 +1,14 @@ +import { PaginationConfig } from 'antd/es/config-provider/context'; +import { RdPaginationProps } from '../../../molecules'; + +//#region Define Ant Design types +type PaginationConfigAntd = PaginationConfig; +//#endregion + +//#region Define extended types +interface PaginationConfigExtend extends Pick {} +//#endregion + +//#region Export types +export type RdPaginationConfig = PaginationConfigAntd & PaginationConfigExtend; +//#endregion diff --git a/src/organisms/ConfigProvider/configs/table.ts b/src/organisms/ConfigProvider/configs/table.ts new file mode 100644 index 0000000..62681f5 --- /dev/null +++ b/src/organisms/ConfigProvider/configs/table.ts @@ -0,0 +1,14 @@ +import { TableConfig } from 'antd/es/config-provider/context'; +import { RdTableProps } from '../../../molecules'; + +//#region Define Ant Design types +type TableConfigAntd = TableConfig; +//#endregion + +//#region Define extended types +interface TableConfigExtend extends Pick {} +//#endregion + +//#region Export types +export type RdTableConfig = TableConfigAntd & TableConfigExtend; +//#endregion diff --git a/src/organisms/ConfigProvider/context/constants.ts b/src/organisms/ConfigProvider/context/constants.ts new file mode 100644 index 0000000..c17aeb4 --- /dev/null +++ b/src/organisms/ConfigProvider/context/constants.ts @@ -0,0 +1,2 @@ +export const defaultPrefixCls = 'ant'; +export const defaultIconPrefixCls = 'anticon'; diff --git a/src/organisms/ConfigProvider/context/helper.ts b/src/organisms/ConfigProvider/context/helper.ts new file mode 100644 index 0000000..5c6e946 --- /dev/null +++ b/src/organisms/ConfigProvider/context/helper.ts @@ -0,0 +1,8 @@ +import { defaultPrefixCls } from './constants'; + +export const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { + if (customizePrefixCls) { + return customizePrefixCls; + } + return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls; +}; diff --git a/src/organisms/ConfigProvider/context/index.tsx b/src/organisms/ConfigProvider/context/index.tsx new file mode 100644 index 0000000..28176ff --- /dev/null +++ b/src/organisms/ConfigProvider/context/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { defaultIconPrefixCls, defaultPrefixCls } from './constants'; +import { RdConfigConsumerProps } from './types'; +import { defaultGetPrefixCls } from './helper'; + +export const ConfigContext = React.createContext({ + // We provide a default function for Context without provider + getPrefixCls: defaultGetPrefixCls, + iconPrefixCls: defaultIconPrefixCls, +}); diff --git a/src/organisms/ConfigProvider/context/types.ts b/src/organisms/ConfigProvider/context/types.ts new file mode 100644 index 0000000..35771b0 --- /dev/null +++ b/src/organisms/ConfigProvider/context/types.ts @@ -0,0 +1,22 @@ +import { ConfigConsumerProps } from 'antd/es/config-provider'; +import { RdPaginationConfig } from '../configs/pagination'; +import { RdTableConfig } from '../configs/table'; + +//#region Define Ant Design types +type ConfigConsumerPropsAntd = ConfigConsumerProps; +//#endregion + +//#region Define extended types +interface ConfigConsumerPropsExtend { + pagination?: RdPaginationConfig; + table?: RdTableConfig; +} +//#endregion + +//#region Export types +export type RdConfigConsumerProps = Omit & + ConfigConsumerPropsExtend; +//#endregion + +export type RdConfigContext = React.Context; +export type RdConfigConsumer = React.Consumer; diff --git a/src/organisms/ConfigProvider/index.tsx b/src/organisms/ConfigProvider/index.tsx index bdc3c0c..4f6f945 100644 --- a/src/organisms/ConfigProvider/index.tsx +++ b/src/organisms/ConfigProvider/index.tsx @@ -1,2 +1,3 @@ export * from './ConfigProvider'; -export * from './types'; \ No newline at end of file +export * from './types'; +export * from './types.props' \ No newline at end of file diff --git a/src/organisms/ConfigProvider/types.props.ts b/src/organisms/ConfigProvider/types.props.ts new file mode 100644 index 0000000..367cb65 --- /dev/null +++ b/src/organisms/ConfigProvider/types.props.ts @@ -0,0 +1,19 @@ +import { ConfigProviderProps } from 'antd/es/config-provider'; +import { RdPaginationConfig } from './configs/pagination'; +import { RdTableConfig } from './configs/table'; + +//#region Define Ant Design types +type ConfigProviderPropsAntd = ConfigProviderProps; +//#endregion + +//#region Define extended types +interface ConfigProviderPropsExtend { + pagination?: RdPaginationConfig; + table?: RdTableConfig; +} +//#endregion + +//#region Export types +export type RdConfigProviderProps = Omit & + ConfigProviderPropsExtend; +//#endregion diff --git a/src/organisms/ConfigProvider/types.ts b/src/organisms/ConfigProvider/types.ts index 7506d30..a6b3327 100644 --- a/src/organisms/ConfigProvider/types.ts +++ b/src/organisms/ConfigProvider/types.ts @@ -9,14 +9,14 @@ import { AliasToken } from 'antd/es/theme/internal'; import { RdMoleculesTokenMap } from '../../molecules/types'; import { ConfigProviderInternal } from './ConfigProvider'; import { RdTemplatesTokenMap } from '../../templates/types'; +import { RdConfigProviderProps } from './types.props'; +import { RdConfigContext } from './context/types'; //#region Define Ant Design types -type ConfigProviderProps = GetProps; type Algorithm = ThemeConfig['algorithm']; //#endregion //#region Define extended types -type ConfigProviderPropsExtend = {}; type AliasTokenExtend = { /** * Brand secondary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. @@ -52,7 +52,6 @@ type ThemeConfigExtend = { //#region Export types export type RdComponentTokenMap = RdMoleculesTokenMap & RdTemplatesTokenMap; -export type RdConfigProviderProps = ConfigProviderProps & ConfigProviderPropsExtend; export type RdAliasToken = AliasToken & AliasTokenExtend; export type RdComponentsConfigExtend = RdComponentsConfig & ComponentsConfigExtend; export type RdAlgorithm = Algorithm & AlgorithmExtend; @@ -65,9 +64,13 @@ export type RdComponentsConfig = { }; export type RdConfigProviderCompoundedComponent = typeof ConfigProviderInternal & { - ConfigContext: (typeof ConfigProviderAntd)['ConfigContext']; + ConfigContext: RdConfigContext; SizeContext: (typeof ConfigProviderAntd)['SizeContext']; config: (typeof ConfigProviderAntd)['config']; useConfig: (typeof ConfigProviderAntd)['useConfig']; }; //#endregion + +//#region Define component types +export type RdConfigProviderInternalComponent = React.FC; +//#endregion