You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2020/06/02 07:14:36 UTC
[incubator-apisix-dashboard] 01/01: feat: added disabled
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch feat-step3
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
commit b57babaeb95ff0ca7984e3e6fd5b632316cbfe3d
Author: juzhiyuan <jj...@gmail.com>
AuthorDate: Tue Jun 2 15:14:07 2020 +0800
feat: added disabled
---
src/components/PluginForm/PluginForm.tsx | 22 ++++++---
src/components/PluginForm/typing.d.ts | 1 +
src/global.less | 11 +++++
.../Routes/components/CreateStep3/CreateStep3.tsx | 1 +
.../Routes/components/CreateStep3/PluginDrawer.tsx | 52 ++++++++++++----------
5 files changed, 58 insertions(+), 29 deletions(-)
diff --git a/src/components/PluginForm/PluginForm.tsx b/src/components/PluginForm/PluginForm.tsx
index 3bc04f8..ee3018f 100644
--- a/src/components/PluginForm/PluginForm.tsx
+++ b/src/components/PluginForm/PluginForm.tsx
@@ -13,6 +13,7 @@ const formLayout = {
interface RenderComponentProps {
placeholder?: string;
+ disabled?: boolean;
}
const renderComponentByProperty = (
@@ -24,7 +25,7 @@ const renderComponentByProperty = (
if (type === 'string') {
if (propertyValue.enum) {
return (
- <Select>
+ <Select disabled={restProps?.disabled}>
{propertyValue.enum.map((enumValue) => (
<Select.Option value={enumValue} key={enumValue}>
{enumValue}
@@ -37,7 +38,7 @@ const renderComponentByProperty = (
}
if (type === 'boolean') {
- return <Switch />;
+ return <Switch {...restProps} />;
}
if (type === 'number' || type === 'integer') {
@@ -45,6 +46,7 @@ const renderComponentByProperty = (
<InputNumber
min={minimum ?? Number.MIN_SAFE_INTEGER}
max={maximum ?? Number.MAX_SAFE_INTEGER}
+ {...restProps}
/>
);
}
@@ -53,6 +55,7 @@ const renderComponentByProperty = (
};
interface ArrayComponentProps {
+ disabled?: boolean;
schema: PluginForm.PluginSchema;
propertyName: string;
propertyValue: PluginForm.PluginProperty;
@@ -62,6 +65,7 @@ const ArrayComponent: React.FC<ArrayComponentProps> = ({
propertyName,
propertyValue,
schema,
+ disabled,
children,
}) => {
const { formatMessage } = useIntl();
@@ -86,7 +90,7 @@ const ArrayComponent: React.FC<ArrayComponentProps> = ({
{/* BUG: There should also care about minItems */}
{fields.length < (propertyValue.maxItems ?? Number.MAX_SAFE_INTEGER) ? (
<Form.Item label={propertyName}>
- <Button type="dashed" onClick={add}>
+ <Button type="dashed" onClick={add} disabled={disabled}>
<PlusOutlined /> {formatMessage({ id: 'component.global.add' })}
</Button>
</Form.Item>
@@ -97,7 +101,13 @@ const ArrayComponent: React.FC<ArrayComponentProps> = ({
);
};
-const PluginForm: React.FC<PluginForm.Props> = ({ name, form, initialData = {}, onFinish }) => {
+const PluginForm: React.FC<PluginForm.Props> = ({
+ name,
+ form,
+ disabled,
+ initialData = {},
+ onFinish,
+}) => {
const [schema, setSchema] = useState<PluginForm.PluginSchema>();
useEffect(() => {
@@ -129,6 +139,7 @@ const PluginForm: React.FC<PluginForm.Props> = ({ name, form, initialData = {},
return (
<ArrayComponent
key={propertyName}
+ disabled={disabled}
schema={schema!}
propertyName={propertyName}
propertyValue={propertyValue}
@@ -142,6 +153,7 @@ const PluginForm: React.FC<PluginForm.Props> = ({ name, form, initialData = {},
return (
<ArrayComponent
key={propertyName}
+ disabled={disabled}
schema={schema!}
propertyName={propertyName}
propertyValue={propertyValue}
@@ -161,7 +173,7 @@ const PluginForm: React.FC<PluginForm.Props> = ({ name, form, initialData = {},
rules={transformPropertyToRules(schema!, propertyName, propertyValue)}
valuePropName={propertyValue.type === 'boolean' ? 'checked' : 'value'}
>
- {renderComponentByProperty(propertyValue)}
+ {renderComponentByProperty(propertyValue, { disabled })}
</Form.Item>
);
})}
diff --git a/src/components/PluginForm/typing.d.ts b/src/components/PluginForm/typing.d.ts
index 80ee8ed..0d1fb08 100644
--- a/src/components/PluginForm/typing.d.ts
+++ b/src/components/PluginForm/typing.d.ts
@@ -1,6 +1,7 @@
declare namespace PluginForm {
interface Props {
name?: string;
+ disabled?: boolean;
// FormInstance
form: any;
initialData?: PluginSchema;
diff --git a/src/global.less b/src/global.less
index 6ea576e..b4b674e 100644
--- a/src/global.less
+++ b/src/global.less
@@ -56,3 +56,14 @@ ol {
.ant-pro-sider-light {
z-index: 99;
}
+
+.ant-checkbox-inner,
+.ant-radio-inner,
+.ant-input-number-disabled,
+.ant-input[disabled] {
+ background-color: #fff !important;
+}
+
+.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+ background-color: #fff !important;
+}
diff --git a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
index d8ebc62..2803b56 100644
--- a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
+++ b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
@@ -85,6 +85,7 @@ const CreateStep3: React.FC<Props> = ({ data, disabled, onChange }) => {
)}
<PluginDrawer
name={currentPlugin}
+ disabled={disabled}
initialData={currentPlugin ? data.step3Data.plugins[currentPlugin] : {}}
active={Boolean(activeList.find((item) => item.name === currentPlugin))}
onActive={(name: string) => {
diff --git a/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx b/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
index 575bdb2..366bce7 100644
--- a/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
+++ b/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
@@ -6,6 +6,7 @@ import PluginForm from '@/components/PluginForm';
interface Props extends Omit<PluginForm.Props, 'form'> {
active?: boolean;
+ disabled?: boolean;
onActive(name: string): void;
onInactive(name: string): void;
onClose(): void;
@@ -14,6 +15,7 @@ interface Props extends Omit<PluginForm.Props, 'form'> {
const PluginDrawer: React.FC<Props> = ({
name,
active,
+ disabled,
onActive,
onInactive,
onClose,
@@ -33,35 +35,37 @@ const PluginDrawer: React.FC<Props> = ({
destroyOnClose
onClose={onClose}
footer={
- <div style={{ display: 'flex', justifyContent: 'space-between' }}>
- <div>
+ disabled ? null : (
+ <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ <div>
+ {Boolean(active) && (
+ <Button type="primary" danger onClick={() => onInactive(name)}>
+ 禁用
+ </Button>
+ )}
+ {Boolean(!active) && (
+ <Button type="primary" onClick={() => onActive(name)}>
+ 启用
+ </Button>
+ )}
+ </div>
{Boolean(active) && (
- <Button type="primary" danger onClick={() => onInactive(name)}>
- 禁用
- </Button>
- )}
- {Boolean(!active) && (
- <Button type="primary" onClick={() => onActive(name)}>
- 启用
- </Button>
+ <div>
+ <Button onClick={onClose}>取消</Button>
+ <Button
+ type="primary"
+ style={{ marginRight: 8, marginLeft: 8 }}
+ onClick={() => form.submit()}
+ >
+ 提交
+ </Button>
+ </div>
)}
</div>
- {Boolean(active) && (
- <div>
- <Button onClick={onClose}>取消</Button>
- <Button
- type="primary"
- style={{ marginRight: 8, marginLeft: 8 }}
- onClick={() => form.submit()}
- >
- 提交
- </Button>
- </div>
- )}
- </div>
+ )
}
>
- <PluginForm name={name!} form={form} {...rest} />
+ <PluginForm name={name!} form={form} {...rest} disabled={disabled} />
</Drawer>
);
};