antd#Radio TypeScript Examples
The following examples show how to use
antd#Radio.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ExampleCustomScreen.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
ExampleCustomScreen = () => {
const mainStore = useMainStore();
const [contentDisplayMode, setContentDisplayMode] = useState(mainStore.contentDisplayMode);
const handleContentDisplayModeChange = useCallback((e: RadioChangeEvent) => {
if (Object.values(ContentDisplayMode).includes(e.target.value)) {
mainStore.contentDisplayMode = e.target.value;
setContentDisplayMode(mainStore.contentDisplayMode);
}
}, [mainStore, setContentDisplayMode]);
return (
<>
<h2>
Example Custom Screen
</h2>
<Divider/>
<div>
<div><code>ContentDisplayMode:</code></div>
<Radio.Group onChange={handleContentDisplayModeChange} value={contentDisplayMode}>
<Space direction='vertical'>
<Radio value={ContentDisplayMode.ActivateExistingTab}>
<code>ContentDisplayMode.ActivateExistingTab</code>
</Radio>
<Radio value={ContentDisplayMode.AlwaysNewTab}>
<code>ContentDisplayMode.AlwaysNewTab</code>
</Radio>
<Radio value={ContentDisplayMode.NoTabs}>
<code>ContentDisplayMode.NoTabs</code>
</Radio>
</Space>
</Radio.Group>
</div>
</>
)
}
Example #2
| Source File: index.tsx From drip-table with MIT License | 6 votes |
|
public render() {
const config = this.props.schema;
const uiProps = this.props.schema['ui:props'] || {};
return (
<RadioGroup
{...filterAttributes(uiProps, 'options')}
defaultValue={config.default as RadioGroupProps['defaultValue']}
value={this.props.value}
onChange={(e) => {
this.props.onChange?.(e.target.value);
}}
>
{ (this.options as RadioOptionType[])?.map((option, i) => {
if (typeof option === 'string') {
option = { label: option, value: option };
}
return (
<Radio key={i} value={option.value} style={option.style} disabled={option.disabled}>
{ option.label }
{ option.description && (
<Popover content={option.description}>
<QuestionCircleOutlined style={{ margin: '0 8px' }} />
</Popover>
) }
</Radio>
);
}) }
</RadioGroup>
);
}
Example #3
| Source File: ActionStep.tsx From posthog-foss with MIT License | 6 votes |
|
function URLMatching({
step,
sendStep,
}: {
step: ActionStepType
sendStep: (stepToSend: ActionStepType) => void
}): JSX.Element {
const handleURLMatchChange = (e: RadioChangeEvent): void => {
sendStep({ ...step, url_matching: e.target.value })
}
return (
<Radio.Group
buttonStyle="solid"
onChange={handleURLMatchChange}
value={step.url_matching || 'contains'}
size="small"
>
<Radio.Button value="contains">contains</Radio.Button>
<Radio.Button value="regex">matches regex</Radio.Button>
<Radio.Button value="exact">matches exactly</Radio.Button>
</Radio.Group>
)
}
Example #4
| Source File: questionnaire.tsx From RareCamp with Apache License 2.0 | 6 votes |
|
MutationForm = () => {
return (
<>
<Form.Item
label="How do mutations in this gene cause the disease?"
name="mutationType"
rules={[
{
required: true,
message: 'Please select one of the options',
},
]}
>
<Radio.Group>
<Radio value={MutationType.LEADS_TO_LOSS}>
{mutationsTypesMap[MutationType.LEADS_TO_LOSS]}
</Radio>
<Radio value={MutationType.LEADS_TO_GAIN}>
{mutationsTypesMap[MutationType.LEADS_TO_GAIN]}
</Radio>
<Radio value={MutationType.LEADS_TO_MORE}>
{mutationsTypesMap[MutationType.LEADS_TO_MORE]}
</Radio>
<Radio value={MutationType.NOT_SURE}>
{mutationsTypesMap[MutationType.NOT_SURE]}
</Radio>
</Radio.Group>
</Form.Item>
</>
)
}
Example #5
| Source File: Preview.tsx From dnde with GNU General Public License v3.0 | 6 votes |
|
ModeSelect = ({ onChange, value }: ModeSelectProps) => {
return (
<>
<Radio.Group
onChange={onChange}
value={value}
options={[
{ label: 'desktop', value: 'desktop' },
{ label: 'mobile', value: 'mobile' },
]}
buttonStyle="solid"
optionType="button"
/>
</>
);
}
Example #6
| Source File: utils.tsx From antdp with MIT License | 6 votes |
|
getItem = ({ attr, type, inputNode }: {
attr?: Partial<ItemChildAttr<any, any>>;
type?: ItemChildType;
inputNode?: ((...arg: any[]) => React.ReactNode) | React.ReactNode;
}) => {
let renderItem = undefined;
if (type === 'Input') {
const inputAttr = attr as InputProps;
renderItem = <Input {...inputAttr} />;
} else if (type === 'TextArea') {
const inputAttr = attr as TextAreaProps;
renderItem = <Input.TextArea {...inputAttr} />;
} else if (type === 'InputNumber') {
const inputAttr = attr as InputNumberProps;
renderItem = <InputNumber {...inputAttr} />;
} else if (type === 'AutoComplete') {
const inputAttr = attr as AutoCompleteProps;
renderItem = <AutoComplete {...inputAttr} />;
} else if (type === 'Cascader') {
const inputAttr = attr as CascaderProps;
renderItem = <Cascader {...inputAttr} />;
} else if (type === 'DatePicker') {
const inputAttr = attr as DatePickerProps;
renderItem = <DatePicker {...inputAttr} />;
} else if (type === 'Rate') {
const inputAttr = attr as RateProps;
renderItem = <Rate {...inputAttr} />;
} else if (type === 'Slider') {
const inputAttr = attr as SliderSingleProps;
renderItem = <Slider {...inputAttr} />;
} else if (type === 'TreeSelect') {
const inputAttr = attr as TreeSelectProps<any>;
renderItem = <TreeSelect {...inputAttr} />;
} else if (type === 'Select') {
const inputAttr = attr as SelectProps<any>;
renderItem = <Select {...inputAttr} />;
} else if (type === 'Checkbox') {
const inputAttr = attr as CheckboxGroupProps;
renderItem = <Checkbox.Group {...inputAttr} />;
} else if (type === 'Mentions') {
const inputAttr = attr as MentionProps;
renderItem = <Mentions {...inputAttr} />;
} else if (type === 'Radio') {
const inputAttr = attr as RadioProps;
renderItem = <Radio.Group {...inputAttr} />;
} else if (type === 'Switch') {
const inputAttr = attr as SwitchProps;
renderItem = <Switch {...inputAttr} />;
} else if (type === 'TimePicker') {
const inputAttr = attr as TimePickerProps;
renderItem = <TimePicker {...inputAttr} />;
} else if (type === 'Upload') {
const inputAttr = attr as UploadProps;
renderItem = <Upload {...inputAttr} />;
} else if (type === 'RangePicker') {
const inputAttr = attr as RangePickerProps;
renderItem = <RangePicker {...inputAttr} />;
} else if (type === 'Custom') {
renderItem = inputNode;
}
return renderItem;
}
Example #7
| Source File: App.tsx From brick-design with MIT License | 6 votes |
|
export default function App() {
const [isPreview,setIsPreview]=useState(false)
return (
<BrickProvider
config={config}
warn={(msg: string) => {
message.warning(msg)
}}
>
<div className={styles['wrapper']}>
<ToolBar />
<div className={styles['content']}>
<AllComponents />
<div className={styles['canvas-container']}>
<Radio.Group defaultValue={'0'} style={{marginBottom:20}}
onChange={(e)=>setIsPreview(e.target.value==='1')}>
<Radio.Button value={'0'}>
编辑
</Radio.Button>
<Radio.Button value='1'>
预览
</Radio.Button>
</Radio.Group>
{isPreview?<PreviewPanel/>:<DesignPanel />}
</div>
<Resizable
enable={RIGHT_ENABLE}
defaultSize={{ width: '150px', height: '100%' }}
className={styles['props-shadow']}
>
<SettingsPanel />
</Resizable>
</div>
</div>
</BrickProvider>
)
}
Example #8
| Source File: GraphFilterView.tsx From dendron with GNU Affero General Public License v3.0 | 6 votes |
|
RadioButton = ({
value,
customCSS,
}: {
value: GraphThemeEnum;
customCSS?: string;
}) => {
let singleSelectOptions = Object.keys(GraphThemeEnum).map(
(k) => GraphThemeEnum[k as GraphThemeEnum]
);
if (!customCSS) {
singleSelectOptions = singleSelectOptions.filter(
(option) => option !== GraphThemeEnum.Custom
);
}
const ideDispatch = ideHooks.useIDEAppDispatch();
return (
<Radio.Group
onChange={(e) => {
updateGraphTheme(e.target.value);
ideDispatch(ideSlice.actions.setGraphTheme(e.target.value));
}}
value={value}
>
<Space direction="vertical">
{singleSelectOptions.map((option) => (
<Radio key={option} value={option}>
{option}
</Radio>
))}
</Space>
</Radio.Group>
);
}
Example #9
| Source File: BrickBook.spec.tsx From next-basics with GNU General Public License v3.0 | 6 votes |
|
describe("BrickBook", () => {
afterEach(() => {
jest.clearAllMocks();
});
it("should work when shallow rendering", async () => {
const wrapper = shallow(
<BrickBook
stories={[]}
storyId="fake-story-of-correct"
storyType="brick"
/>
);
wrapper.find(Radio.Group).invoke("onChange")({ target: { value: "json" } });
await (global as any).flushPromises();
expect(wrapper.find(BrickDemo).at(0).prop("mode")).toBe("json");
expect(wrapper.find(BrickDemo).length).toBe(1);
});
it("should work when render as default language", async () => {
mount(
<BrickBook stories={[]} storyId="fake-story-of-slots" storyType="brick" />
);
expect(applyPageTitle).toBeCalledWith("Fake Story of Slots Zh");
});
it("should render nothing if story not found", () => {
const wrapper = shallow(
<BrickBook stories={[]} storyId="not-existed-story" storyType="brick" />
);
expect(wrapper.html()).toBe(null);
});
});
Example #10
| Source File: property-field.tsx From erda-ui with GNU Affero General Public License v3.0 | 6 votes |
|
RadioGroup = React.forwardRef(
(radioProps: {
options: Array<{ name: string; value: string }>;
value: string;
disabled?: boolean;
onChange: (e: any) => void;
}) => {
const { options, onChange, value, disabled } = radioProps;
return (
<Radio.Group buttonStyle="solid" size="small" value={value} onChange={onChange} disabled={disabled}>
{options.map(({ value: v, name }) => (
<Radio.Button key={v} value={v}>
{name}
</Radio.Button>
))}
</Radio.Group>
);
},
)
Example #11
| Source File: node-detail.tsx From jetlinks-ui-antd with MIT License | 6 votes |
|
nodeConfigMap.set('data-mapping', [
{
label: '保留原字段',
key: 'config.keepSourceData',
styles: {
lg: { span: 24 },
md: { span: 24 },
sm: { span: 24 },
},
formStyle: {
wrapperCol: { span: 24 },
labelCol: { span: 24 },
},
component: (
<Radio.Group>
<Radio value={true}>是</Radio>
<Radio value={false}>否</Radio>
</Radio.Group>
),
},
{
label: '转换规则',
key: 'config.keepSourceData',
styles: {
lg: { span: 24 },
md: { span: 24 },
sm: { span: 24 },
},
formStyle: {
wrapperCol: { span: 24 },
labelCol: { span: 24 },
},
component: <Button>编辑</Button>,
},
]);
Example #12
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 6 votes |
|
export default function index() {
const namePrefix = ['options', 'legend'];
return (
<Panel header='Legend'>
<>
<Form.Item noStyle label='' name={[...namePrefix, 'displayMode']}>
<Radio.Group buttonStyle='solid'>
<Radio.Button value='table'>开启</Radio.Button>
<Radio.Button value='hidden'>关闭</Radio.Button>
</Radio.Group>
</Form.Item>
{/*目前只有 table 形态的 legend，后面支持 list 形态后再打开下面的位置设置*/}
{/* <Form.Item noStyle shouldUpdate={(prevValues, curValues) => _.get(prevValues, [...namePrefix, 'displayMode']) !== _.get(curValues, [...namePrefix, 'displayMode'])}>
{({ getFieldValue }) => {
if (getFieldValue([...namePrefix, 'displayMode']) === 'list') {
return (
<Form.Item label='位置' name={[...namePrefix, 'placement']}>
<Radio.Group buttonStyle='solid'>
<Radio.Button value='right'>right</Radio.Button>
<Radio.Button value='bottom'>bottom</Radio.Button>
</Radio.Group>
</Form.Item>
);
}
return null;
}}
</Form.Item> */}
</>
</Panel>
);
}
Example #13
| Source File: index.tsx From drip-table with MIT License | 5 votes |
|
RadioGroup = Radio.Group
Example #14
| Source File: CartFinalPriceTable.tsx From Shopping-Cart with MIT License | 5 votes |
|
CartFinalPriceTable: FC<PropTypes> = props => {
const { dataSource, recommend } = props;
const [discountPrice, setDiscountPrice] = useState<number>(0);
const [defaultChecked, setDefaultChecked] = useState('unApplied');
const couponData = useSelector(couponTypeSelector);
const isNotRecommend: boolean = recommend.recommend === 'unApplied';
// 자동 추천 기능
useEffect(() => {
setDefaultChecked(recommend.recommend);
if (recommend.recommend === 'rate') {
setDiscountPrice(dataSource.rateDiscountPrice);
}
if (recommend.recommend === 'amount') {
setDiscountPrice(dataSource.amountDiscountPrice);
}
if (recommend.recommend === 'unApplied') {
setDiscountPrice(0);
}
}, [dataSource, recommend]);
const handleChange = useCallback(
(event: RadioChangeEvent) => {
setDefaultChecked(event.target.value);
if (event.target.value === 'rate') {
setDiscountPrice(dataSource.rateDiscountPrice);
}
if (event.target.value === 'amount') {
setDiscountPrice(dataSource.amountDiscountPrice);
}
if (event.target.value === 'unApplied') {
setDiscountPrice(0);
}
},
[setDiscountPrice, dataSource],
);
return (
<>
{couponData ? (
<Radio.Group
value={defaultChecked}
buttonStyle="solid"
style={{ margin: '25px 50px 0 60px' }}
onChange={handleChange}
>
<Radio value={'unApplied'} disabled={isNotRecommend}>
쿠폰 미적용
</Radio>
<Radio value={couponData.rate.type} disabled={isNotRecommend}>
{couponData.rate.title}
</Radio>
<Radio value={couponData.amount.type} disabled={isNotRecommend}>
{couponData.amount.title}
</Radio>
</Radio.Group>
) : (
''
)}
<Descriptions bordered style={{ margin: '10px 50px 0 50px' }}>
<Descriptions.Item label="총 상품 금액" span={2}>
<PriceLabel value={dataSource.totalPrice} />
</Descriptions.Item>
<Descriptions.Item label="상품 할인 금액">
<PriceLabel value={discountPrice} />
</Descriptions.Item>
<Descriptions.Item label="최종 가격" span={3}>
<PriceLabel
value={dataSource.totalPrice - discountPrice}
large={true}
/>
</Descriptions.Item>
</Descriptions>
</>
);
}
Example #15
| Source File: DayPane.tsx From ii-admin-base with MIT License | 5 votes |
|
RadioGroup = Radio.Group
Example #16
| Source File: ActionStep.tsx From posthog-foss with MIT License | 5 votes |
|
function TypeSwitcher({
step,
sendStep,
}: {
step: ActionStepType
sendStep: (stepToSend: ActionStepType) => void
}): JSX.Element {
const handleChange = (e: RadioChangeEvent): void => {
const type = e.target.value
if (type === '$autocapture') {
sendStep({ ...step, event: '$autocapture' })
} else if (type === 'event') {
sendStep({ ...step, event: '' })
} else if (type === '$pageview') {
sendStep({
...step,
event: '$pageview',
url: step.url,
})
}
}
return (
<div className={`type-switcher${step.event === undefined ? ' unselected' : ''}`}>
<Radio.Group
buttonStyle="solid"
onChange={handleChange}
value={
step.event === '$autocapture' || step.event === '$pageview' || step.event === undefined
? step.event
: 'event'
}
>
<Radio.Button value="$autocapture">Autocapture</Radio.Button>
<Radio.Button value="event">Custom event</Radio.Button>
<Radio.Button value="$pageview">Page view</Radio.Button>
</Radio.Group>
</div>
)
}
Example #17
| Source File: ObjectAttrArr.spec.tsx From next-basics with GNU General Public License v3.0 | 5 votes |
|
describe("ObjectAttrArr", () => {
it("should work", () => {
const props = {
value: defaultValue,
onChange: jest.fn(),
};
const wrapper = mount(<ObjectAttrArr {...props} />);
expect(wrapper.find("Select").at(0).props().value.length).toBe(0);
});
it("should change regex", () => {
const props = {
value: defaultValue,
onChange: jest.fn(),
};
const wrapper = shallow(<ObjectAttrArr {...props} />);
wrapper.find("Input").at(0).invoke("onChange")({ target: { value: "d" } });
expect(props.onChange).toBeCalledWith({
...defaultValue,
regex: "d",
});
});
it("should change mode", () => {
const props = {
value: defaultValue,
onChange: jest.fn(),
};
const wrapper = shallow(<ObjectAttrArr {...props} />);
wrapper.find(Radio.Group).at(0).invoke("onChange")({
target: { value: "tag" },
});
expect(props.onChange).toBeCalledWith({
...defaultValue,
mode: "tag",
});
});
it("should change default", () => {
const props = {
value: defaultValue,
onChange: jest.fn(),
};
const wrapper = shallow(<ObjectAttrArr {...props} />);
wrapper.find(Select).at(0).invoke("onChange")([1, 2, 3], null);
expect(props.onChange).toBeCalledWith({
...defaultValue,
default: [1, 2, 3],
});
});
});
Example #18
| Source File: index.tsx From erda-ui with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const { dataSource, tableMode } = this.state;
const {
title,
form,
tableProps,
textAreaProps,
editDisabled,
existKeys = [],
onChange,
isNeedTextArea = true,
keyDisabled,
disableAdd,
isValueTextArea = false,
disableDelete,
validateField,
maxLength,
} = this.props;
const tableData = dataSource;
const textData = convertToTextData(dataSource);
return (
<div>
<div className="flex justify-between items-center mb-3">
<span className="key-value-title">{title || i18n.t('default:Information configuration')}</span>
{isNeedTextArea ? (
<Radio.Group size="small" value={tableMode ? 'key-value' : 'text'} onChange={this.toggleEditMode}>
<Radio.Button value="text">{i18n.t('default:Text Mode')}</Radio.Button>
<Radio.Button value="key-value">{i18n.t('default:Entry Mode')}</Radio.Button>
</Radio.Group>
) : null}
</div>
{tableMode ? (
<KeyValueTable
data={tableData}
editDisabled={editDisabled}
keyDisabled={keyDisabled}
existKeys={existKeys}
form={form}
disableAdd={disableAdd}
disableDelete={disableDelete}
addBtnText={allWordsFirstLetterUpper(i18n.t('common:add parameter'))}
title={null}
ref={(ref) => {
this.table = ref;
}}
// 该组件认为删除 input-item 和改变 input-item 的值是同一种行为
onChange={onChange}
onDel={onChange}
isTextArea={isValueTextArea}
validate={validateField ? validateField.table : undefined}
maxLength={maxLength}
{...tableProps}
/>
) : (
<div>
{/* <div className="mb-4" style={{ display: 'flex', flexDirection: 'row-reverse', lineHeight: '28px' }}> */}
{/* {modeSwitch} */}
{/* </div> */}
<KeyValueTextArea
data={textData}
editDisabled={editDisabled}
existKeys={existKeys}
form={form}
ref={(ref) => {
this.textArea = ref;
}}
validate={validateField ? validateField.text : undefined}
maxLength={maxLength}
{...textAreaProps}
/>
</div>
)}
</div>
);
}
Example #19
| Source File: SaveAsModal.tsx From gant-design with MIT License | 5 votes |
|
function SaveAsModal(props: SaveAsModalProps) {
const {
form: { getFieldDecorator, validateFieldsAndScroll },
visible,
loading,
onCancel,
onSubmit,
systemViews,
customViews,
companyViews,
companyViewAuth,
...nextProps
} = props
const allNames = useMemo(() => { return [...systemViews, ...customViews, ...companyViews].map(item => (item.name)) }, [systemViews, customViews, companyViews])
const onOk = useCallback(() => {
validateFieldsAndScroll((errors: any, values: object) => {
if (errors) return
onSubmit && onSubmit(values)
})
}, [onSubmit])
return (
<Receiver>
{(locale) => <Modal
visible={visible}
title={locale.viewSaveAs}
onCancel={onCancel}
centered
destroyOnClose
footer={
<div>
<Button size="small" icon="close-circle" onClick={onCancel}>
{locale.cancel}
</Button>
<Button size="small" type="primary" icon="save" loading={loading} onClick={onOk}>
{locale.save}
</Button>
</div>
}
{...nextProps}
>
<Form>
<Form.Item label={locale.viewType} style={{marginBottom: 0}}>
{getFieldDecorator('type', {
initialValue: 'custom'
})(
<Radio.Group size="small" buttonStyle="solid">
<Radio value="custom">{locale.customView}</Radio>
{ companyViewAuth && <Radio value="company">{locale.companyView}</Radio> }
</Radio.Group>
)}
</Form.Item>
<Form.Item label={locale.viewName}>
{getFieldDecorator('name', {
rules: [
{
message: locale.viewNameRepeat,
validator: function (rule: any, value: string = '', callback: Function) {
let res = value.trim()
if (!res) {
rule.message = locale.viewNameRequired
callback(true)
} else if (allNames.includes(res)) {
callback(true)
}
callback(undefined)
}
}
],
})(<Input placeholder={locale.viewNamePlaceholder} maxLength={500} autoComplete="off" />)}
</Form.Item>
</Form>
</Modal>}
</Receiver>
)
}
Example #20
| Source File: TestDemo.tsx From jetlinks-ui-antd with MIT License | 5 votes |
|
TestDemo = ({
rangePickerValue,
salesData,
isActive,
handleRangePickerChange,
loading,
selectDate,
}: {
rangePickerValue: RangePickerValue;
isActive: (key: 'today' | 'week' | 'month' | 'year') => string;
salesData: ISalesData[];
loading: boolean;
handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;
}) => (
<Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
<div className={styles.salesCard}>
<Tabs
tabBarExtraContent={
<div className={styles.salesExtraWrap}>
<div className={styles.salesExtra}>
<Radio.Group defaultValue="all">
<Radio.Button value="all">
全部设备
</Radio.Button>
<Radio.Button value="online">
在线
</Radio.Button>
<Radio.Button value="stores">
离线
</Radio.Button>
</Radio.Group>
</div>
<RangePicker
value={rangePickerValue}
onChange={handleRangePickerChange}
style={{ width: 256 }}
/>
</div>
}
size="large"
tabBarStyle={{ marginBottom: 24 }}
>
<TabPane
tab={'设备数量'}
key="sales"
>
<Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}>
<h4 className={styles.rankingTitle}>
物联网设备连接排行
</h4>
<Bar
height={295}
title={
'连接数量'
}
data={salesData}
/>
</div>
</Col>
</Row>
</TabPane>
</Tabs>
</div>
</Card>
)
Example #21
| Source File: UpdateForm.tsx From ui-visualization with MIT License | 5 votes |
|
RadioGroup = Radio.Group
Example #22
| Source File: index.tsx From ant-simple-draw with MIT License | 5 votes |
|
OlUl: FC<{ keyName: string; form: FormInstance<Store>; showEditPropsData: any }> = memo(
({ keyName, form, showEditPropsData }) => {
const [type, setType] = useState<string | undefined>(undefined);
const ulType = [
{ label: '小圆点', value: 'disc' },
{ label: '空心圆圈', value: 'circle' },
{ label: '小方块', value: 'square' },
];
const olType = [
{ label: '1', value: '1' },
{ label: 'A', value: 'A' },
{ label: 'I', value: 'I' },
];
useEffect(() => {
if (showEditPropsData[keyName]) {
// 将数据流的数据同步一下
setType(showEditPropsData[keyName].type);
}
}, [showEditPropsData, keyName]);
const selectData = useMemo(() => {
return type === 'ol' ? olType : ulType;
}, [type]);
return (
<>
<Form.Item label={null} name={[keyName, 'type']} style={{ marginBottom: '16px' }}>
<Radio.Group
onChange={(val) => {
setType(val.target.value);
form.setFieldsValue({
[keyName]: {
attrType: undefined,
},
});
}}
>
<Radio value={'ol'}>有序列表</Radio>
<Radio value={'ul'}>无序列表</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label={'序列'} name={[keyName, 'attrType']} style={{ marginBottom: '16px' }}>
<Selects data={selectData} valKey="value" valName="label" />
</Form.Item>
<Form.List name={[keyName, 'list']}>
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space
key={key}
style={{ display: 'flex', marginBottom: 8, justifyContent: 'space-around' }}
align="baseline"
>
<Form.Item {...restField} name={[name, 'text']} style={{ marginBottom: '16px' }}>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} title="移除" />
</Space>
))}
<Form.Item style={{ marginBottom: '16px' }}>
<Button onClick={() => add()} block icon={<PlusOutlined />}>
添加数据
</Button>
</Form.Item>
</>
)}
</Form.List>
</>
);
},
)
Example #23
| Source File: index.tsx From scorpio-h5-design with MIT License | 5 votes |
|
export default function Background() {
const { selectComponent, changeContainerPropsState } = useModel('bridge');
const { backgroundImage, backgroundColor, backgroundSize, backgroundRepeat } = selectComponent?.containerProps ?? {};
const [backgroundFillType, setBackgroundFillType] = useState(FILL_TYPE.color);
return (
<Descriptions column={1}>
<Descriptions.Item label="填充">
<div className="background">
<Radio.Group
size="small"
options={[
{ label: '颜色填充', value: FILL_TYPE.color },
{ label: '背景图片', value: FILL_TYPE.image },
]}
onChange={(e) => { setBackgroundFillType(e.target.value); }}
value={backgroundFillType}
optionType="button"
buttonStyle="solid"
/>
</div>
</Descriptions.Item>
{backgroundFillType === FILL_TYPE.color && (
<Descriptions.Item label="填充颜色">
<ColorPicker
className="background-color"
onChange={(value: string) => { changeContainerPropsState('backgroundColor', value); }}
value={backgroundColor}
/>
</Descriptions.Item>
)}
{backgroundFillType === FILL_TYPE.image && (
<>
<Descriptions.Item label="图片">
<ImageUpload
value={backgroundImage}
onChange={(value) => { changeContainerPropsState('backgroundImage', value); }}
/>
</Descriptions.Item>
<Descriptions.Item label="尺寸">
<Radio.Group
style={{ marginTop: 4 }}
size="small"
options={[
{ label: '默认', value: 'initial' },
{ label: '充满', value: '100% 100%' },
{ label: '等比填充', value: 'contain' },
{ label: '等比覆盖', value: 'cover' },
]}
onChange={(e) => { changeContainerPropsState('backgroundSize', e.target.value); }}
value={backgroundSize ?? 'initial'}
optionType="button"
buttonStyle="solid"
/>
</Descriptions.Item>
<Descriptions.Item label="重复">
<Radio.Group
style={{ marginTop: 4 }}
size="small"
options={[
{ label: '默认', value: 'initial' },
{ label: '水平重复', value: 'repeat-x' },
{ label: '垂直重复', value: 'repeat-y' },
{ label: '不重复', value: 'no-repeat' },
]}
onChange={(e) => { changeContainerPropsState('backgroundRepeat', e.target.value); }}
value={backgroundRepeat ?? 'initial'}
optionType="button"
buttonStyle="solid"
/>
</Descriptions.Item>
</>
)}
</Descriptions>
);
}
Example #24
| Source File: index.tsx From react_admin with MIT License | 4 votes |
|
FromAdd: React.FC<{}> = props => {
const [visible, setVisible] = useState(false)
const [form] = Form.useForm()
const submitData = (values: any) => {
setVisible(false)
message.success('提交数据成功!!!')
form.resetFields()
}
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo)
}
const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
}
return (
<>
<Button
onClick={() => setVisible(true)}
size="large"
type="primary"
className="btn-bottom"
>
添加新数据
</Button>
<Modal
title="提交数据"
onCancel={() => setVisible(false)}
visible={visible}
footer={null}
>
<Form
form={form}
initialValues={{ ji: true, level: 2020 }}
name="basic"
onFinish={submitData}
onFinishFailed={onFinishFailed}
{...layout}
>
<Form.Item label="时间" name="time" rules={[{ required: true }]}>
<DatePicker format="YYYY-MM-DD" />
</Form.Item>
<Form.Item label="赛事名称" name="title" rules={[{ required: true }]}>
<Input placeholder="请输入赛事名称" />
</Form.Item>
<Form.Item label="赛事级别" name="ji" rules={[{ required: true }]}>
<Radio.Group>
<Radio value={true}>省赛</Radio>
<Radio value={false}>校赛</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="年度" name="level" rules={[{ required: true }]}>
<InputNumber max={2020} min={2010} />
</Form.Item>
<Form.Item label="学校" name="school" rules={[{ required: true }]}>
<Input placeholder="请输入学校" />
</Form.Item>
<Form.Item label="地址" name="address" rules={[{ required: true }]}>
<Input placeholder="请输入地址" />
</Form.Item>
<Form.Item label="描述信息" name="desc" rules={[{ required: true }]}>
<Input placeholder="请输入描述信息" />
</Form.Item>
<Form.Item wrapperCol={{ offset: 4, span: 20 }}>
<Space>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button
onClick={() => form.resetFields()}
type="default"
htmlType="reset"
>
重置
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
</>
)
}
Example #25
| Source File: palette.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
palette = () => (
<Palette>
<Category name="Text">
<Component name="Formatted Message">
<Variant>
<FormattedMessage />
</Variant>
</Component>
<Component name="Heading">
<Variant name="h1">
<Typography.Title></Typography.Title>
</Variant>
<Variant name="h2">
<Typography.Title level={2}></Typography.Title>
</Variant>
<Variant name="h3">
<Typography.Title level={3}></Typography.Title>
</Variant>
<Variant name="h4">
<Typography.Title level={4}></Typography.Title>
</Variant>
<Variant name="h5">
<Typography.Title level={5}></Typography.Title>
</Variant>
</Component>
<Component name="Text">
<Variant>
<Typography.Text></Typography.Text>
</Variant>
<Variant name="Secondary">
<Typography.Text type="secondary"></Typography.Text>
</Variant>
<Variant name="Success">
<Typography.Text type="success"></Typography.Text>
</Variant>
<Variant name="Warning">
<Typography.Text type="warning"></Typography.Text>
</Variant>
<Variant name="Danger">
<Typography.Text type="danger"></Typography.Text>
</Variant>
<Variant name="Disabled">
<Typography.Text disabled></Typography.Text>
</Variant>
</Component>
</Category>
<Category name="Layout">
<Component name="Divider">
<Variant>
<Divider />
</Variant>
</Component>
<Component name="Grid">
<Variant name="Simple Row">
<Row></Row>
</Variant>
<Variant name="Two columns">
<Row>
<Col span={12}></Col>
<Col span={12}></Col>
</Row>
</Variant>
<Variant name="Three columns">
<Row>
<Col span={8}></Col>
<Col span={8}></Col>
<Col span={8}></Col>
</Row>
</Variant>
</Component>
<Component name="Space">
<Variant>
<Space />
</Variant>
<Variant name="Small">
<Space size={"small"} />
</Variant>
<Variant name="Large">
<Space size={"large"} />
</Variant>
</Component>
</Category>
<Category name="Controls">
<Component name="Autocomplete">
<Variant>
<AutoComplete placeholder="input here" />
</Variant>
</Component>
<Component name="Button">
<Variant>
<Button></Button>
</Variant>
<Variant name="Primary">
<Button type="primary"></Button>
</Variant>
<Variant name="Link">
<Button type="link"></Button>
</Variant>
<Variant name="Dropdown">
<Dropdown
trigger={["click"]}
overlay={
<Menu>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
</Menu>
}
>
<Button></Button>
</Dropdown>
</Variant>
</Component>
<Component name="Checkbox">
<Variant>
<Checkbox />
</Variant>
</Component>
<Component name="Switch">
<Variant>
<Switch />
</Variant>
</Component>
<Component name="Radio Group">
<Variant>
<Radio.Group>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</Variant>
<Variant name="Button">
<Radio.Group>
<Radio.Button value={1}>A</Radio.Button>
<Radio.Button value={2}>B</Radio.Button>
<Radio.Button value={3}>C</Radio.Button>
<Radio.Button value={4}>D</Radio.Button>
</Radio.Group>
</Variant>
</Component>
<Component name="DatePicker">
<Variant>
<DatePicker />
</Variant>
<Variant name="Range">
<DatePicker.RangePicker />
</Variant>
</Component>
<Component name="TimePicker">
<Variant>
<TimePicker />
</Variant>
<Variant name="Range">
<TimePicker.RangePicker />
</Variant>
</Component>
<Component name="Input">
<Variant>
<Input />
</Variant>
<Variant name="Number">
<InputNumber />
</Variant>
</Component>
<Component name="Select">
<Variant>
<Select defaultValue="1">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
<Variant name="Multiple">
<Select defaultValue={["1"]} mode="multiple" allowClear>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
</Component>
<Component name="Link">
<Variant>
<Typography.Link href="" target="_blank"></Typography.Link>
</Variant>
</Component>
<Component name="Slider">
<Variant>
<Slider defaultValue={30} />
</Variant>
<Variant name="Range">
<Slider range defaultValue={[20, 50]} />
</Variant>
</Component>
</Category>
<Category name="Data Display">
<Component name="Field">
<Variant>
<Field
entityName={ENTITY_NAME}
disabled={readOnlyMode}
propertyName=""
formItemProps={{
style: { marginBottom: "12px" }
}}
/>
</Variant>
</Component>
<Component name="Card">
<Variant>
<Card />
</Variant>
<Variant name="With Title">
<Card>
<Card title="Card title">
<p>Card content</p>
</Card>
</Card>
</Variant>
<Variant name="My custom card">
<Card>
<Card title="Card title">
<p>Card content</p>
<Avatar />
</Card>
</Card>
</Variant>
</Component>
<Component name="Tabs">
<Variant>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Variant>
<Variant name="Tab Pane">
<Tabs.TabPane></Tabs.TabPane>
</Variant>
</Component>
<Component name="Collapse">
<Variant>
<Collapse defaultActiveKey="1">
<Collapse.Panel
header="This is panel header 1"
key="1"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 2"
key="2"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 3"
key="3"
></Collapse.Panel>
</Collapse>
</Variant>
</Component>
<Component name="Image">
<Variant>
<Image width={200} src="" />
</Variant>
</Component>
<Component name="Avatar">
<Variant>
<Avatar icon={<UserOutlined />} />
</Variant>
<Variant name="Image">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Variant>
</Component>
<Component name="Badge">
<Variant>
<Badge count={1}></Badge>
</Variant>
</Component>
<Component name="Statistic">
<Variant>
<Statistic title="Title" value={112893} />
</Variant>
</Component>
<Component name="Alert">
<Variant name="Success">
<Alert message="Text" type="success" />
</Variant>
<Variant name="Info">
<Alert message="Text" type="info" />
</Variant>
<Variant name="Warning">
<Alert message="Text" type="warning" />
</Variant>
<Variant name="Error">
<Alert message="Text" type="error" />
</Variant>
</Component>
<Component name="List">
<Variant>
<List
bordered
dataSource={[]}
renderItem={item => <List.Item></List.Item>}
/>
</Variant>
</Component>
</Category>
<Category name="Icons">
<Component name="Arrow">
<Variant name="Up">
<ArrowUpOutlined />
</Variant>
<Variant name="Down">
<ArrowDownOutlined />
</Variant>
<Variant name="Left">
<ArrowLeftOutlined />
</Variant>
<Variant name="Right">
<ArrowRightOutlined />
</Variant>
</Component>
<Component name="Question">
<Variant>
<QuestionOutlined />
</Variant>
<Variant name="Circle">
<QuestionCircleOutlined />
</Variant>
</Component>
<Component name="Plus">
<Variant>
<PlusOutlined />
</Variant>
<Variant name="Circle">
<PlusCircleOutlined />
</Variant>
</Component>
<Component name="Info">
<Variant>
<InfoOutlined />
</Variant>
<Variant name="Circle">
<InfoCircleOutlined />
</Variant>
</Component>
<Component name="Exclamation">
<Variant>
<ExclamationOutlined />
</Variant>
<Variant name="Circle">
<ExclamationCircleOutlined />
</Variant>
</Component>
<Component name="Close">
<Variant>
<CloseOutlined />
</Variant>
<Variant name="Circle">
<CloseCircleOutlined />
</Variant>
</Component>
<Component name="Check">
<Variant>
<CheckOutlined />
</Variant>
<Variant name="Circle">
<CheckCircleOutlined />
</Variant>
</Component>
<Component name="Edit">
<Variant>
<EditOutlined />
</Variant>
</Component>
<Component name="Copy">
<Variant>
<CopyOutlined />
</Variant>
</Component>
<Component name="Delete">
<Variant>
<DeleteOutlined />
</Variant>
</Component>
<Component name="Bars">
<Variant>
<BarsOutlined />
</Variant>
</Component>
<Component name="Bell">
<Variant>
<BellOutlined />
</Variant>
</Component>
<Component name="Clear">
<Variant>
<ClearOutlined />
</Variant>
</Component>
<Component name="Download">
<Variant>
<DownloadOutlined />
</Variant>
</Component>
<Component name="Upload">
<Variant>
<UploadOutlined />
</Variant>
</Component>
<Component name="Sync">
<Variant>
<SyncOutlined />
</Variant>
</Component>
<Component name="Save">
<Variant>
<SaveOutlined />
</Variant>
</Component>
<Component name="Search">
<Variant>
<SearchOutlined />
</Variant>
</Component>
<Component name="Settings">
<Variant>
<SettingOutlined />
</Variant>
</Component>
<Component name="Paperclip">
<Variant>
<PaperClipOutlined />
</Variant>
</Component>
<Component name="Phone">
<Variant>
<PhoneOutlined />
</Variant>
</Component>
<Component name="Mail">
<Variant>
<MailOutlined />
</Variant>
</Component>
<Component name="Home">
<Variant>
<HomeOutlined />
</Variant>
</Component>
<Component name="Contacts">
<Variant>
<ContactsOutlined />
</Variant>
</Component>
<Component name="User">
<Variant>
<UserOutlined />
</Variant>
<Variant name="Add">
<UserAddOutlined />
</Variant>
<Variant name="Remove">
<UserDeleteOutlined />
</Variant>
</Component>
<Component name="Team">
<Variant>
<TeamOutlined />
</Variant>
</Component>
</Category>
<Category name="Screens">
<Component name="ExampleCustomScreen">
<Variant>
<ExampleCustomScreen />
</Variant>
</Component>
<Component name="CustomEntityFilterTest">
<Variant>
<CustomEntityFilterTest />
</Variant>
</Component>
<Component name="CustomFormControls">
<Variant>
<CustomFormControls />
</Variant>
</Component>
<Component name="CustomDataDisplayComponents">
<Variant>
<CustomDataDisplayComponents />
</Variant>
</Component>
<Component name="CustomAppLayouts">
<Variant>
<CustomAppLayouts />
</Variant>
</Component>
<Component name="CustomControls">
<Variant>
<CustomControls />
</Variant>
</Component>
<Component name="ErrorBoundaryTests">
<Variant>
<ErrorBoundaryTests />
</Variant>
</Component>
<Component name="TestBlankScreen">
<Variant>
<TestBlankScreen />
</Variant>
</Component>
<Component name="CarEditor">
<Variant>
<CarEditor />
</Variant>
</Component>
<Component name="CarBrowserCards">
<Variant>
<CarBrowserCards />
</Variant>
</Component>
<Component name="CarBrowserList">
<Variant>
<CarBrowserList />
</Variant>
</Component>
<Component name="CarBrowserTable">
<Variant>
<CarBrowserTable />
</Variant>
</Component>
<Component name="CarCardsGrid">
<Variant>
<CarCardsGrid />
</Variant>
</Component>
<Component name="FavoriteCars">
<Variant>
<FavoriteCars />
</Variant>
</Component>
<Component name="CarCardsWithDetails">
<Variant>
<CarCardsWithDetails />
</Variant>
</Component>
<Component name="CarTableWithFilters">
<Variant>
<CarTableWithFilters />
</Variant>
</Component>
<Component name="CarMasterDetail">
<Variant>
<CarMasterDetail />
</Variant>
</Component>
<Component name="FormWizardCompositionO2O">
<Variant>
<FormWizardCompositionO2O />
</Variant>
</Component>
<Component name="FormWizardEditor">
<Variant>
<FormWizardEditor />
</Variant>
</Component>
<Component name="FormWizardBrowserTable">
<Variant>
<FormWizardBrowserTable />
</Variant>
</Component>
<Component name="CarMultiSelectionTable">
<Variant>
<CarMultiSelectionTable />
</Variant>
</Component>
<Component name="DatatypesTestEditor">
<Variant>
<DatatypesTestEditor />
</Variant>
</Component>
<Component name="DatatypesTestBrowserCards">
<Variant>
<DatatypesTestBrowserCards />
</Variant>
</Component>
<Component name="DatatypesTestBrowserList">
<Variant>
<DatatypesTestBrowserList />
</Variant>
</Component>
<Component name="DatatypesTestBrowserTable">
<Variant>
<DatatypesTestBrowserTable />
</Variant>
</Component>
<Component name="DatatypesTestCards">
<Variant>
<DatatypesTestCards />
</Variant>
</Component>
<Component name="AssociationO2OEditor">
<Variant>
<AssociationO2OEditor />
</Variant>
</Component>
<Component name="AssociationO2OBrowserTable">
<Variant>
<AssociationO2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationO2MEditor">
<Variant>
<AssociationO2MEditor />
</Variant>
</Component>
<Component name="AssociationO2MBrowserTable">
<Variant>
<AssociationO2MBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2OEditor">
<Variant>
<AssociationM2OEditor />
</Variant>
</Component>
<Component name="AssociationM2OBrowserTable">
<Variant>
<AssociationM2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2MEditor">
<Variant>
<AssociationM2MEditor />
</Variant>
</Component>
<Component name="AssociationM2MBrowserTable">
<Variant>
<AssociationM2MBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2OEditor">
<Variant>
<CompositionO2OEditor />
</Variant>
</Component>
<Component name="CompositionO2OBrowserTable">
<Variant>
<CompositionO2OBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2MEditor">
<Variant>
<CompositionO2MEditor />
</Variant>
</Component>
<Component name="CompositionO2MBrowserTable">
<Variant>
<CompositionO2MBrowserTable />
</Variant>
</Component>
<Component name="DeeplyNestedTestEntityEditor">
<Variant>
<DeeplyNestedTestEntityEditor />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityTable">
<Variant>
<DeeplyNestedO2MTestEntityTable />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityEditor">
<Variant>
<DeeplyNestedO2MTestEntityEditor />
</Variant>
</Component>
<Component name="IntIdEditor">
<Variant>
<IntIdEditor />
</Variant>
</Component>
<Component name="IntIdBrowserTable">
<Variant>
<IntIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdBrowserCards">
<Variant>
<IntIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdBrowserList">
<Variant>
<IntIdBrowserList />
</Variant>
</Component>
<Component name="IntIdentityIdCards">
<Variant>
<IntIdentityIdCards />
</Variant>
</Component>
<Component name="IntIdentityIdEditor">
<Variant>
<IntIdentityIdEditor />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserTable">
<Variant>
<IntIdentityIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserCards">
<Variant>
<IntIdentityIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserList">
<Variant>
<IntIdentityIdBrowserList />
</Variant>
</Component>
<Component name="StringIdCards">
<Variant>
<StringIdCards />
</Variant>
</Component>
<Component name="StringIdMgtCardsEdit">
<Variant>
<StringIdMgtCardsEdit />
</Variant>
</Component>
<Component name="StringIdBrowserCards">
<Variant>
<StringIdBrowserCards />
</Variant>
</Component>
<Component name="StringIdBrowserList">
<Variant>
<StringIdBrowserList />
</Variant>
</Component>
<Component name="StringIdBrowserTable">
<Variant>
<StringIdBrowserTable />
</Variant>
</Component>
<Component name="WeirdStringIdEditor">
<Variant>
<WeirdStringIdEditor />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserCards">
<Variant>
<WeirdStringIdBrowserCards />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserList">
<Variant>
<WeirdStringIdBrowserList />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserTable">
<Variant>
<WeirdStringIdBrowserTable />
</Variant>
</Component>
<Component name="BoringStringIdEditor">
<Variant>
<BoringStringIdEditor />
</Variant>
</Component>
<Component name="BoringStringIdBrowserTable">
<Variant>
<BoringStringIdBrowserTable />
</Variant>
</Component>
<Component name="TrickyIdEditor">
<Variant>
<TrickyIdEditor />
</Variant>
</Component>
<Component name="TrickyIdBrowserTable">
<Variant>
<TrickyIdBrowserTable />
</Variant>
</Component>
</Category>
</Palette>
)
Example #26
| Source File: index.tsx From drip-table with MIT License | 4 votes |
|
private renderAttributeComponent(schema: DTGComponentPropertySchema, index: number, parentIndex: number) {
const currentValue = (this.props.value || [])[parentIndex] || {};
const options = schema['ui:props']?.options as LabeledValue[] || this.props.fieldOptions || [];
if (schema['ui:type'] === 'radio') {
return (
<Radio.Group
style={{ width: '100%' }}
defaultValue={schema.default}
value={currentValue[schema.name]}
onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
>
{
options?.map(
(option, i) =>
<Radio key={i} value={option.value}>{ option.label }</Radio>,
)
}
</Radio.Group>
);
}
if (schema['ui:type'] === 'input') {
return (
<Input
style={{ width: '100%' }}
defaultValue={schema.default as string}
value={currentValue[schema.name] as string}
placeholder={schema['ui:props']?.placeholder as string}
onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'text') {
return (
<Input.TextArea
style={{ width: '100%' }}
autoSize={schema['ui:autoSize']}
defaultValue={schema.default as string}
value={currentValue[schema.name] as string}
placeholder={schema['ui:props']?.placeholder as string}
onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'auto-complete') {
return (
<AutoComplete
style={{ width: '100%' }}
defaultValue={schema.default as string}
value={currentValue[schema.name] as string}
options={options}
onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'number') {
return (
<InputNumber
style={{ width: '100%' }}
min={schema['ui:minium']}
max={schema['ui:maximum']}
step={schema['ui:step']}
defaultValue={Number(schema.default)}
value={Number(currentValue[schema.name])}
onChange={value => this.changeColumnItem(schema.name, Number(value), parentIndex)}
/>
);
}
if (schema['ui:type'] === 'switch') {
const value = typeof currentValue[schema.name] === 'undefined' ? schema.default : currentValue[schema.name];
return (
<Switch
checked={value as boolean}
checkedChildren={schema['ui:checkedContent']}
unCheckedChildren={schema['ui:unCheckedContent']}
onChange={checked => this.changeColumnItem(schema.name, checked, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'select') {
const formattedValue = (schema['ui:mode'] === 'multiple' || schema['ui:mode'] === 'tags') && !Array.isArray(currentValue[schema.name]) ? [currentValue[schema.name]] : currentValue[schema.name];
return (
<Select
showSearch
style={{ width: '100%' }}
mode={schema['ui:mode']}
defaultValue={schema.default as SelectValue}
value={formattedValue as SelectValue}
options={options}
onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'array-list') {
return (
<ArrayComponent
theme={this.props.theme}
schema={schema}
value={currentValue[schema.name] as Record<string, unknown>[] | undefined}
onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
onValidate={msg => this.props.onValidate?.(msg)}
/>
);
}
return null;
}
Example #27
| Source File: DayPane.tsx From ii-admin-base with MIT License | 4 votes |
|
DayPane: React.FC<TProps> = props => {
const { value, onChange } = props;
const [currentRadio, setCurrentRadio] = useState(1);
const [from, setFrom] = useState(1);
const [to, setTo] = useState(10);
const [offsetFrom, setOffsetFrom] = useState(1);
const [offset, setOffset] = useState(1);
const [lateDay, setLateDay] = useState(1);
const [selected, setSelected] = useState(['1']);
useEffect(() => {
if (value === '*') {
setCurrentRadio(1);
} else if (value === '?') {
setCurrentRadio(2);
} else if (value.indexOf('-') > -1) {
setCurrentRadio(3);
const [defaultFrom, defaultTo] = value.split('-');
setFrom(parseInt(defaultFrom, 10));
setTo(parseInt(defaultTo, 10));
} else if (value.indexOf('/') > -1) {
setCurrentRadio(4);
const [defaultOffsetFrom, defaultOffset] = value.split('/');
setOffsetFrom(parseInt(defaultOffsetFrom, 10));
setOffset(parseInt(defaultOffset, 10));
} else if (value.indexOf('W') > -1) {
setCurrentRadio(5);
setLateDay(parseInt(value.split('W')[0], 10));
} else if (value.indexOf('L') > -1) {
setCurrentRadio(6);
} else {
setCurrentRadio(7);
setSelected(value ? value.split(',') : ['1']);
}
}, [value]);
useEffect(() => {
switch (currentRadio) {
case 1:
onChange('*');
break;
case 2:
onChange('?');
break;
case 3:
onChange(`${from}-${to}`);
break;
case 4:
onChange(`${offsetFrom}/${offset}`);
break;
case 5:
onChange(`${lateDay}W`);
break;
case 6:
onChange('L');
break;
case 7:
onChange(selected.join(','));
break;
default:
break;
}
}, [currentRadio, from, to, offsetFrom, offset, lateDay, selected]);
const onChangeRadio = useCallback(e => {
setCurrentRadio(e.target.value);
}, []);
const onChangeFrom = useCallback(v => {
setFrom(v || 1);
}, []);
const onChangeTo = useCallback(v => {
setTo(v || 1);
}, []);
const onChangeOffsetFrom = useCallback(v => {
setOffsetFrom(v || 1);
}, []);
const onChangeOffset = useCallback(v => {
setOffset(v || 1);
}, []);
const onChangeLateDay = useCallback(v => {
setLateDay(v || 1);
}, []);
const onChangeSelected = useCallback(v => {
setSelected(v.length !== 0 ? v : ['1']);
}, []);
const checkList = useMemo(() => {
const disabled = currentRadio !== 7;
const checks = [];
for (let i = 1; i < 32; i++) {
checks.push(
<Col key={i} span={3}>
<Checkbox disabled={disabled} value={i.toString()}>
{i}
</Checkbox>
</Col>,
);
}
return checks;
}, [currentRadio, selected]);
return (
<RadioGroup name="radiogroup" value={currentRadio} onChange={onChangeRadio}>
<Radio style={radioStyle} value={1}>
每一日
</Radio>
<Radio style={radioStyle} value={2}>
不指定
</Radio>
<Radio style={radioStyle} value={3}>
周期从
<InputNumber
disabled={currentRadio !== 3}
min={1}
max={23}
value={from}
size="small"
onChange={onChangeFrom}
style={{ width: 100 }}
/>
-
<InputNumber
disabled={currentRadio !== 3}
min={1}
max={23}
value={to}
size="small"
onChange={onChangeTo}
style={{ width: 100 }}
/>
日，每日执行一次
</Radio>
<Radio style={radioStyle} value={4}>
从
<InputNumber
disabled={currentRadio !== 4}
min={1}
max={23}
value={offsetFrom}
size="small"
onChange={onChangeOffsetFrom}
style={{ width: 100 }}
/>
日开始， 每
<InputNumber
disabled={currentRadio !== 4}
min={1}
max={23}
value={offset}
size="small"
onChange={onChangeOffset}
style={{ width: 100 }}
/>
日执行一次
</Radio>
<Radio style={radioStyle} value={5}>
每月
<InputNumber
disabled={currentRadio !== 5}
min={1}
max={31}
value={lateDay}
size="small"
onChange={onChangeLateDay}
style={{ width: 100 }}
/>
号最近的那个工作日
</Radio>
<Radio style={radioStyle} value={6}>
本月最后一天
</Radio>
<Radio value={7}>
指定
<br />
<CheckboxGroup value={selected} onChange={onChangeSelected}>
<Row> {checkList}</Row>
</CheckboxGroup>
</Radio>
</RadioGroup>
);
}
Example #28
| Source File: ActionsTable.tsx From posthog-foss with MIT License | 4 votes |
|
export function ActionsTable(): JSX.Element {
const { currentTeam } = useValues(teamLogic)
const { actions, actionsLoading } = useValues(actionsModel({ params: 'include_count=1' }))
const { loadActions } = useActions(actionsModel)
const [searchTerm, setSearchTerm] = useState('')
const [filterByMe, setFilterByMe] = useState(false)
const { user } = useValues(userLogic)
const columns: LemonTableColumns<ActionType> = [
{
title: 'Name',
dataIndex: 'name',
width: '30%',
sorter: (a: ActionType, b: ActionType) => ('' + a.name).localeCompare(b.name),
render: function RenderName(name, action: ActionType, index: number): JSX.Element {
return (
<Link data-attr={'action-link-' + index} to={urls.action(action.id)} className="row-name">
{name || <i>Unnnamed action</i>}
</Link>
)
},
},
{
title: 'Type',
key: 'type',
render: function RenderType(_, action: ActionType): JSX.Element {
return (
<span>
{action.steps?.length ? (
action.steps.map((step) => (
<div key={step.id}>
{(() => {
let url = stripHTTP(step.url || '')
url = url.slice(0, 40) + (url.length > 40 ? '...' : '')
switch (step.event) {
case '$autocapture':
return 'Autocapture'
case '$pageview':
switch (step.url_matching) {
case 'regex':
return (
<>
Page view URL matches regex <strong>{url}</strong>
</>
)
case 'exact':
return (
<>
Page view URL matches exactly <strong>{url}</strong>
</>
)
default:
return (
<>
Page view URL contains <strong>{url}</strong>
</>
)
}
default:
return (
<>
Event: <strong>{step.event}</strong>
</>
)
}
})()}
</div>
))
) : (
<i>Empty – set this action up</i>
)}
</span>
)
},
},
createdByColumn() as LemonTableColumn<ActionType, keyof ActionType | undefined>,
createdAtColumn() as LemonTableColumn<ActionType, keyof ActionType | undefined>,
...(currentTeam?.slack_incoming_webhook
? [
{
title: 'Webhook',
dataIndex: 'post_to_slack',
sorter: (a: ActionType, b: ActionType) => Number(a.post_to_slack) - Number(b.post_to_slack),
render: function RenderActions(post_to_slack): JSX.Element | null {
return post_to_slack ? <CheckOutlined /> : null
},
} as LemonTableColumn<ActionType, keyof ActionType | undefined>,
]
: []),
{
width: 0,
render: function RenderActions(_, action) {
return (
<More
overlay={
<>
<LemonButton type="stealth" to={urls.action(action.id)} fullWidth>
Edit
</LemonButton>
<LemonButton
type="stealth"
to={
combineUrl(
urls.insightNew({
insight: InsightType.TRENDS,
interval: 'day',
display: ChartDisplayType.ActionsLineGraphLinear,
actions: [
{
id: action.id,
name: action.name,
type: 'actions',
order: 0,
},
],
})
).url
}
fullWidth
>
Try out in Insights
</LemonButton>
<LemonSpacer />
<LemonButton
type="stealth"
style={{ color: 'var(--danger)' }}
onClick={() =>
deleteWithUndo({
endpoint: api.actions.determineDeleteEndpoint(),
object: action,
callback: loadActions,
})
}
fullWidth
>
Delete action
</LemonButton>
</>
}
/>
)
},
},
]
let data = actions
if (searchTerm && searchTerm !== '') {
data = searchActions(data, searchTerm)
}
if (filterByMe) {
data = data.filter((item) => item.created_by?.uuid === user?.uuid)
}
return (
<div data-attr="manage-events-table">
<EventPageHeader activeTab={EventsTab.Actions} />
<div>
<div />
<div className="tutorial-container">
<div className="t-element">
<div>
<img src={imgGrouping} alt="" />
</div>
<div>
<div className="title">Multiple grouping</div>
<div className="description">Group multiple sets of events into a single action.</div>
</div>
</div>
<div className="t-element">
<div>
<img src={imgStandardized} alt="" />
</div>
<div>
<div className="title">Clean & standardized data</div>
<div className="description">
Keep your actions the same, even if your product or data changes.
</div>
</div>
</div>
<div className="t-element">
<div>
<img src={imgRetroactive} alt="" />
</div>
<div>
<div className="title">Retroactive</div>
<div className="description">
We'll retroactively update your actions to match any past events.
</div>
</div>
</div>
</div>
</div>
<Input.Search
placeholder="Search for actions"
allowClear
enterButton
style={{ maxWidth: 600, width: 'initial', flexGrow: 1, marginRight: 12 }}
onChange={(e) => {
setSearchTerm(e.target.value)
}}
/>
<Radio.Group buttonStyle="solid" value={filterByMe} onChange={(e) => setFilterByMe(e.target.value)}>
<Radio.Button value={false}>All actions</Radio.Button>
<Radio.Button value={true}>My actions</Radio.Button>
</Radio.Group>
<div className="mb float-right">
<NewActionButton />
</div>
<LemonTable
columns={columns}
loading={actionsLoading}
rowKey="id"
pagination={{ pageSize: 100 }}
data-attr="actions-table"
dataSource={data}
defaultSorting={{
columnKey: 'created_by',
order: -1,
}}
emptyState="The first step to standardized analytics is creating your first action."
/>
</div>
)
}
Example #29
| Source File: DemoApp.tsx From ali-react-table with MIT License | 4 votes |
|
export function DemoApp() {
const footerDataSource = [
{
confirmedCount: 50000,
curedCount: 4500,
deadCount: 1500,
provinceName: '全国1月总计(mock)',
updateTime: '2020-01-31',
},
{
confirmedCount: 60000,
curedCount: 3400,
deadCount: 800,
provinceName: '全国2月总计(mock)',
updateTime: '2020-02-29',
},
]
const [hasHeader, setHasHeader] = useState(true)
const [isStickyHeader, setIsStickyHeader] = useState(true)
const [hasData, setHasData] = useState(true)
const [hasFooter, setHasFooter] = useState(true)
const [limitSize, setLimitSize] = useState(true)
const [isStickyFooter, setIsStickyFooter] = useState(true)
const [useOuterBorder, setUseOuterBorder] = useState(false)
const [hasStickyScroll, setHasStickyScroll] = useState(true)
const [hasCustomScrollbar, setHasCustomScrollbar] = useState(true)
const [leftLock, setLeftLock] = useState(true)
const [rightLock, setRightLock] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const [useBigData, setUseBigData] = useState(false)
const [useRotate, setUseRotate] = useState(false)
const [useScale, setUseScale] = useState(false)
const [cellCount, setCellCount] = useState(20)
const [theme, setTheme] = useState('default')
const [showControlGrid, toggle] = useReducer((s: boolean) => !s, true)
const appDivRef = useRef<HTMLDivElement>()
useEffect(() => {
const appDiv = appDivRef.current
const handle = setInterval(() => {
requestAnimationFrame(() => {
setCellCount(appDiv.querySelectorAll('td, th').length)
})
}, 500)
return () => {
clearInterval(handle)
}
}, [])
let BaseTableComponent = BaseTable
if (theme === 'default-dark') {
BaseTableComponent = DarkBaseTable
} else if (theme == 'antd') {
BaseTableComponent = AntdBaseTable as any
} else if (theme == 'antd-dark') {
BaseTableComponent = AntdBaseTable as any
} else if (theme === 'hippo') {
BaseTableComponent = HippoBaseTable as any
}
const style1 = limitSize
? { overflow: 'auto', maxHeight: 400, maxWidth: 600, margin: '5vh auto' }
: { marginTop: 'clamp(30px, 20vh, 100px)', marginBottom: 'clamp(100px, 100vh, 400px)' }
const style2 = {
transform: `rotate(${useRotate ? '20deg' : '0'}) scale(${useScale ? 0.85 : 1})`,
}
if (typeof document === 'undefined') {
return null
}
return (
<AppDivAppDiv ref={appDivRef} className={cx({ 'has-custom-scrollbar': hasCustomScrollbar })}>
<div style={{ background: '#f2f2f2', padding: 16 }}>
<Typography>
<h4>
ali-react-table 自定义表格结构示例
<Button onClick={toggle} size="small" style={{ marginLeft: 8 }}>
展开/收起控制面板
</Button>
</h4>
<p>
组件提供了丰富的选项用于调整表格的结构，部分结构可以通过 <code>props.xxx</code>{' '}
快速调整；而其他结构需要通过覆盖表格的样式进行调整。
</p>
</Typography>
{showControlGrid && (
<div className="control-grid">
<div className="item">
<Switch checked={hasHeader} onChange={setHasHeader} />
<code>props.hasHeader</code>
<div>是否展示表头</div>
</div>
<div className="item">
<Switch checked={isStickyHeader} onChange={setIsStickyHeader} />
<code>props.isStickyHeader</code>
<div>表头是否使用粘性定位</div>
</div>
<div className="item">
<Switch checked={isStickyFooter} onChange={setIsStickyFooter} />
<code>props.isStickyFooter</code>
<div>表格页脚是否使用粘性定位</div>
</div>
<div className="item">
<Switch checked={hasStickyScroll} onChange={setHasStickyScroll} />
<code>props.hasStickyScroll</code>
<div>表格是否包含横向粘性滚动条</div>
</div>
<div className="item">
<Switch checked={useOuterBorder} onChange={setUseOuterBorder} />
<code>props.useOuterBorder</code>
<div>是否使用来自外层 div 的边框代替单元格的外边框</div>
</div>
<div className="item">
<Switch checked={hasData} onChange={setHasData} />
<code>props.dataSource=[...]</code>
<div>表格是否有数据</div>
</div>
<div className="item">
<Switch checked={hasFooter} onChange={setHasFooter} />
<code>props.footerDataSource=[...]</code>
<div>表格页脚是否有数据</div>
</div>
<div className="item">
<Switch checked={limitSize} onChange={setLimitSize} />
<div>
将表格尺寸限制为 <code>600*400</code>
</div>
</div>
<div className="item">
<Switch checked={hasCustomScrollbar} onChange={setHasCustomScrollbar} />
<div>使用自定义样式的滚动条</div>
<div>（通过 styled-components 覆盖样式进行实现）</div>
</div>
<div className="item">
<Switch checked={leftLock} onChange={setLeftLock} />
<div>左侧锁列</div>
</div>
<div className="item">
<Switch checked={rightLock} onChange={setRightLock} />
<div>右侧锁列</div>
</div>
<div className="item">
<Switch checked={isLoading} onChange={setIsLoading} />
<div>数据加载动画</div>
</div>
<div className="item">
<Switch checked={useBigData} onChange={setUseBigData} />
<div>大数据量</div>
</div>
<div className="item">
<Switch checked={useRotate} onChange={setUseRotate} />
<div>
<code>transform="rotate(20deg)"</code>
</div>
</div>
<div className="item">
<Switch checked={useScale} onChange={setUseScale} />
<div>
<code>transform="scale(0.85)"</code>
</div>
</div>
<div className="item">
<Radio.Group value={theme} onChange={(e) => setTheme(e.target.value)} size="small">
<Radio.Button value="default">默认</Radio.Button>
<Radio.Button value="default-dark">暗色</Radio.Button>
<Radio.Button value="antd">antd</Radio.Button>
<Radio.Button value="antd-dark">antd 暗色</Radio.Button>
<Radio.Button value="hippo">盒马</Radio.Button>
</Radio.Group>
<div>表格主题</div>
</div>
</div>
)}
<div style={{ marginTop: '1rem' }}>
<div>当前表格中单元格的数量：{cellCount} （包括 th 与 td，每隔 500ms 更新）</div>
</div>
</div>
<BaseTableComponent
className={cx('bordered', 'compact', { dark: theme.includes('dark') })}
isStickyHeader={isStickyHeader}
isStickyFooter={isStickyFooter}
isLoading={isLoading}
style={{ ...style1, ...style2 }}
useOuterBorder={useOuterBorder}
hasStickyScroll={hasStickyScroll}
stickyScrollHeight={hasCustomScrollbar ? 10 : 'auto'}
hasHeader={hasHeader}
columns={[
{ code: 'provinceName', name: '省份', width: 150, lock: leftLock },
{ code: 'cityName', name: '城市', width: 150 },
...repeat<ArtColumn>(
[
{ code: 'confirmedCount', name: '确诊', width: 100, render: amount, align: 'right' },
{ code: 'curedCount', name: '治愈', width: 100, render: amount, align: 'right' },
{ code: 'deadCount', name: '死亡', width: 100, render: amount, align: 'right' },
],
useBigData ? 40 : 10,
),
{ code: 'updateTime', name: '更新时间', width: 150, lock: rightLock },
]}
dataSource={hasData ? (useBigData ? repeat(dataSource, 5) : dataSource) : []}
footerDataSource={hasFooter ? footerDataSource : []}
/>
</AppDivAppDiv>
)
}
