Yk-components NPM

yk components

a set of components build with ant design.

Storybook

Ant advanced table

Ant Design Table with search, select, number, datetime filter

Example:

<AdvancedTable<TestClass>
    dataSource={[]}
    size="small"
    columns={[{
        title: 'Text',
        dataIndex: 'text',
        filter: 'search',
    }, {
        title: 'Weekday',
        dataIndex: 'weekday',
        filter: 'select'
    }, {
        title: 'Amount',
        dataIndex: 'amount',
        filter: 'number'
    }, {
        title: 'Date',
        dataIndex: 'date',
        filter: 'datetime
    }]}
/>

Api

AdvancedTableProps

Name	Type	Required	Description
dataSource	T[]	true	DataSource
columns	ColumnOptions\[]	true	Column configuration
defaultSelected	string[]	false	Default selected columns
actionColumn	ColumnProps\	false	Action column will be appended to column configuration
storage	StorageConfig	false	configure if settings should be save to local storage
Ant Table Props	...	...

ColumnOptions\

Name	Type	Required	Description
title	string	true	column title
dataIndex	string	true	column identifier, must be unique
hidden	boolean	false	Default: false
sorter	false	false	sorter for column, Default: true
filter	"select"	"search"	"number"	"datetime"	false	filter for column
value	(r: T) => any	false	value selector, Default: get(record, dataIndex)
renderToString	(v: any, record: T, i: number) => string	false	render value as string for export and select
Ant Column Props	...	...

AsyncButton

Displays loading spinner when onClick returns a Promise

Example:

<AsyncButton {...defaultAntButtonProps} />

Advanced Form

Form Items for Ant Desing Form

Example:

<AdvancedForm
    onSubmit={handleSave}
    initialValues={{
        text: 'text',
        number: 10,
        date: moment(new Date()),
        dateTime: moment(new Date()),
        time: moment(new Date()),
        select: true,
        custom: true
    }}
>
    <AdvancedForm.Group
        items={[{
            title: 'Text',
            type: 'string',
            dataIndex: 'text',
            rules: [{ required: true }]
        }, {
            type: 'number',
            title: 'Number',
            dataIndex: 'number',
            format: '0.0,0'
        }, {
            type: 'date',
            title: 'Date',
            dataIndex: 'date',
            variant: 'date'
        }, {
            type: 'date',
            title: 'Time',
            dataIndex: 'time',
            variant: 'time'
        }, {
            type: 'date',
            title: 'Date Time',
            dataIndex: 'dateTime',
            variant: 'dateTime'
        }, {
            type: 'select',
            title: 'Select',
            dataIndex: 'select',
            options: [
                { value: true, label: 'Ja' },
                { value: false, label: 'Nein' }
            ]
        }, {
            type: 'radio',
            title: 'Radio',
            dataIndex: 'radio',
            options: [
                { value: true, label: 'Ja' },
                { value: false, label: 'Nein' }
            ]
        }, {
            type: 'custom-updatable',
            shouldUpdate: (prev, next) => prev.custom !== next.custom,
            render: () => <Form.Item
                name="custom"
                valuePropName="checked"
                children={<Checkbox>Custom</Checkbox>}
            />
        }]}
    />
</AdvancedForm>

Api

AdvancedFormProps\

Name	Type	Required	Default
onSubmit	(values: any) => Promise\	false	undefined
initialValues	T	false	undefined
cancelText	string	false	'Cancel'
submitText	string	false	'Save'
onCancel	() => void	false	undefined
showButtons	boolean	false	true

FormItemOptions

BaseFormProps

Name	Type	Required	Description
title	string	true	Title of form item
dataIndex	string	string[]	true	name of property
hidden	boolean	false	is item hidden
rules	Rule[]	false	validation rules
style	React.CSSProperties	false	custom css

FormStringProps

Name	Type	Required	Description
textarea	{ row?: number; } \| true	false	should input be displayed as textarea

FormNumberProps

Name	Type	Required	Description
precision	number	false	percision of number

FormSelectProps

Name	Type	Required	Description
options	{ value: any; label: React.ReactNode; }[]	true	select options

FormCheckboxProps

Name	Type	Required	Description
checkboxText	React.ReactNode	false	text displayed next to checkbox

FormSwitchProps

Name	Type	Required	Description
trueText	React.ReactNode	false	text display when switch is active
falseText	React.ReactNode	false	text display when switch is not active

FormRadioProps

Name	Type	Required	Description
options	{ value: any; label: React.ReactNode; }[]	true	radio options;
variant	"button" \| "checkbox"	false	Default: "button"

FormDateProps

Name	Type	Required	Description
variant	"date" \| "time" \| "dateTime"	false	variant of date, default: "date"

FormCustomProps

Name	Type	Required	Description
render	() => React.ReactElement	true	render function

FormCustomUpdatableProps

Name	Type	Required	Description
shouldUpdate	(prev: any, next: any) => boolean	true	should update check funktion
render	(instance: FormInstance) => React.ReactElement	true	render function

Formatter

Date Formatter

set global config

dateFormatter.configure(options: Partial<DateFormatterConfig>): void;

get format for type

dateFormatter.getFormat(type: "date" | "time" | "dateTime" | string): string;

format number

dateFormatter.format(val: any, type: "date" | "time" | "dateTime" | string = "date"): string;

DateFormatterConfig

Name	Type	Default
emptyValue	string	-
types	Record<string,string>	false	date: "DD.MM.YYYY", time: "HH:mm", dateTime: "DD.MM. YYYY - HH:mm"

Number Formatter

set global config

numberFormatter.configure(options: Partial<NumberFormatterConfig>): void;

get item from config

numberFormatter.getConfig(key: keyof NumberFormatterConfig): string;

format number

numberFormatter.format(val: any, percision: number = 3): string;

trim zero at end

numberFormatter.trim(val: string): string;

parse formatted number

numberFormatter.parse(val: any): number;

NumberFormatterConfig

Name	Type	Default
decimalSeparator	string	.
thousandsSeparator	string	,
emptyValue	string	-

ThemeProvider

Theme Provider for Ant Design

Example:

<ThemeProvider
    defaultTheme="dark"
    themes={{
        dark: ["/antd.dark.min.css", "/scrollbar.dark.css"],
        light: ["/antd.min.css", "/scrollbar.light.css"]
    }}
    themeVariables={{
        light: {
            primary: '#69c0ff'
        },
        dark: {
            primary: '#164c7e'
        }
    }}
    spinner={<h1 style={{ margin: 'auto 100px' }} children="Loading..." />}
>
    {children}
</ThemeProvider>

Api

Name	Type	Required	Description
themes	Record<string, string \| string[]>	true	theme name to url mapping, multiple urls are supported
themeVariables	Record<keyof T, Record\<string,string>>	false	theme variables
defaultTheme	string	true	default theme
spinner	React.ReactNode	true	loading spinner for theme change
children	React.ReactNode	true	children of theme context