fix: display instance type spec

src/components/collapse-container/index.tsx

@@ -173,8 +173,8 @@ export default function CollapsibleContainer({
         ref={contentRef}
         style={{
           maxHeight: height,
-          overflow: 'hidden',
-          transition: collapsible ? 'max-height 0.2s ease' : 'none'
+          overflow: 'hidden'
+          // transition: collapsible ? 'max-height 0.2s ease' : 'none'
         }}
       >
         <div style={{ paddingTop: 8 }}>{children}</div>

src/components/drop-down-buttons/index.tsx

@@ -76,7 +76,7 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
           disabled={disabled}
           trigger={trigger}
           type="primary"
-          dropdownRender={(menus: any) => {
+          popupRender={(menus: any) => {
             return (
               <DropdownWrapper>
                 {_.map(_.tail(items), (item: any) => {

src/components/dynamic-form/components/form-widget.tsx

@@ -18,6 +18,7 @@ const FormWidget: React.FC<
   min,
   max,
   checked,
+  readOnly: disabled,
   onChange
 }) => {
   const Component = ComponentsMap[widget];
@@ -29,7 +30,15 @@ const FormWidget: React.FC<
 
   return Component ? (
     <Component
-      {...{ label, required, placeholder, description, min, max }}
+      {...{
+        label,
+        required,
+        placeholder,
+        description,
+        min,
+        max
+      }}
+      disabled={disabled}
       options={options || optionList}
       value={value}
       checked={checked}

src/components/dynamic-form/components/list-map.tsx

@@ -24,16 +24,23 @@ interface ListMapProps {
   label?: React.ReactNode;
   btnText?: string;
   properties: Record<string, any>;
+  disabled?: boolean;
   onChange?: (data: any) => void;
 }
 
 interface ListItemProps {
   schemaList: any[];
   data: Record<string, any>;
+  disabled?: boolean;
   onChange?: (data: any) => void;
 }
 
-const ListItem: React.FC<ListItemProps> = ({ schemaList, data, onChange }) => {
+const ListItem: React.FC<ListItemProps> = ({
+  schemaList,
+  data,
+  onChange,
+  disabled
+}) => {
   const handleValueChange = (name: string, target: any) => {
     if (target?.target?.type === 'checkbox') {
       const checked = target.target?.checked;
@@ -50,6 +57,7 @@ const ListItem: React.FC<ListItemProps> = ({ schemaList, data, onChange }) => {
         <FormWidget
           widget={schema.type}
           {...schema}
+          disabled={disabled}
           key={schema.name}
           value={data?.[schema.name]}
           checked={data?.[schema.name]}
@@ -66,6 +74,7 @@ const ListMap: React.FC<ListMapProps> = ({
   btnText,
   properties = {},
   minItems = 0,
+  disabled,
   onChange
 }) => {
   const [items, setItems] = React.useState(dataList || []);
@@ -110,28 +119,36 @@ const ListMap: React.FC<ListMapProps> = ({
   }, [dataList]);
 
   return (
-    <Wrapper label={label} btnText={btnText} onAdd={handleOnAdd}>
+    <Wrapper
+      label={label}
+      btnText={btnText}
+      onAdd={handleOnAdd}
+      disabled={disabled}
+    >
       {items.map((item, index) => (
         <RowWrapper key={index}>
           <WidgetBox>
             <ListItem
               schemaList={schemaList}
               data={item}
+              disabled={disabled}
               onChange={(value) => handleItemChange(index, value)}
             />
           </WidgetBox>
-          <Button
-            size="small"
-            type="default"
-            shape="circle"
-            style={{
-              width: 24,
-              marginLeft: 10,
-              flex: 'none'
-            }}
-            icon={<MinusOutlined />}
-            onClick={() => handleDelete(index)}
-          />
+          {!disabled && (
+            <Button
+              size="small"
+              type="default"
+              shape="circle"
+              style={{
+                width: 24,
+                marginLeft: 10,
+                flex: 'none'
+              }}
+              icon={<MinusOutlined />}
+              onClick={() => handleDelete(index)}
+            />
+          )}
         </RowWrapper>
       ))}
     </Wrapper>

src/components/dynamic-form/config/types.ts

@@ -23,6 +23,7 @@ export interface FormWidgetProps {
   title?: string;
   required?: boolean;
   placeholder?: string;
+  readOnly?: boolean;
   options?: { label: string; value: string | number }[];
   description?: string;
   enum?: (string | number)[];

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_l0y0uhurkz8.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_5jrvj6qs39.js'
 });
 
 export default IconFont;

src/components/label-selector/index.tsx

@@ -8,6 +8,7 @@ interface LabelSelectorProps {
   label?: string;
   btnText?: string;
   description?: React.ReactNode;
+  disabled?: boolean;
   onChange?: (labels: Record<string, any>) => void;
   onBlur?: (e: any, type: string, index: number) => void;
   onDelete?: (index: number) => void;
@@ -18,6 +19,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   onChange,
   onBlur,
   onDelete,
+  disabled,
   label,
   btnText,
   description
@@ -81,6 +83,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
 
   return (
     <Inner
+      disabled={disabled}
       label={label}
       btnText={btnText}
       description={
@@ -97,4 +100,4 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   );
 };
 
-export default React.memo(LabelSelector);
+export default LabelSelector;

src/components/label-selector/inner.tsx

@@ -14,6 +14,7 @@ interface LabelSelectorProps {
   onBlur?: (e: any, type: string, index: number) => void;
   onDelete?: (index: number) => void;
   description?: React.ReactNode;
+  disabled?: boolean;
 }
 
 const Inner: React.FC<LabelSelectorProps> = ({
@@ -24,6 +25,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
   onPaste,
   onBlur,
   onDelete,
+  disabled,
   label,
   btnText,
   description
@@ -75,12 +77,14 @@ const Inner: React.FC<LabelSelectorProps> = ({
       label={label}
       description={description}
       onAdd={handleAddLabel}
+      disabled={disabled}
       btnText={btnText}
     >
       <>
         {labelList?.map((item: any, index: number) => {
           return (
             <LabelItem
+              disabled={disabled}
               key={index}
               label={item}
               seperator=":"

src/components/label-selector/label-item.tsx

@@ -15,8 +15,9 @@ interface LabelItemProps {
   keyAddon?: React.ReactNode;
   valueAddon?: React.ReactNode;
   seperator?: string;
-  onDelete?: () => void;
   labelList: { key: string; value: string }[];
+  disabled?: boolean;
+  onDelete?: () => void;
   onChange?: (params: { key: string; value: string }) => void;
   onPaste?: (e: any) => void;
   onBlur?: (e: any, type: string) => void;
@@ -27,6 +28,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
   seperator,
   keyAddon,
   valueAddon,
+  disabled,
   onChange,
   onDelete,
   onPaste,
@@ -82,6 +84,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
             title={intl.formatMessage({ id: 'resources.table.key.tips' })}
           >
             <SealInput.Input
+              disabled={disabled}
               checkStatus="success"
               label={intl.formatMessage({ id: 'common.input.key' })}
               value={label.key}
@@ -96,6 +99,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
       <div className="label-value">
         {valueAddon ?? (
           <SealInput.Input
+            disabled={disabled}
             checkStatus={label.value ? 'success' : ''}
             label={intl.formatMessage({ id: 'common.input.value' })}
             value={label.value}
@@ -104,15 +108,17 @@ const LabelItem: React.FC<LabelItemProps> = ({
           ></SealInput.Input>
         )}
       </div>
-      <Button
-        size="small"
-        className="btn"
-        type="default"
-        shape="circle"
-        onClick={onDelete}
-      >
-        <MinusOutlined />
-      </Button>
+      {!disabled && (
+        <Button
+          size="small"
+          className="btn"
+          type="default"
+          shape="circle"
+          onClick={onDelete}
+        >
+          <MinusOutlined />
+        </Button>
+      )}
     </div>
   );
 };

src/components/label-selector/wrapper.tsx

@@ -11,6 +11,7 @@ interface WrapperProps {
   labelExtra?: React.ReactNode;
   children: React.ReactNode;
   btnText?: string;
+  disabled?: boolean;
   onAdd?: () => void;
   button?: React.ReactNode;
 }
@@ -44,6 +45,7 @@ const Wrapper: React.FC<WrapperProps> = ({
   labelExtra,
   onAdd,
   btnText,
+  disabled,
   button
 }) => {
   const intl = useIntl();
@@ -59,17 +61,19 @@ const Wrapper: React.FC<WrapperProps> = ({
         </span>
       )}
       {children}
-      <ButtonWrapper>
-        {button || (
-          <Button variant="filled" color="default" block onClick={onAdd}>
-            <PlusOutlined className="font-size-14" />
-            {btnText ||
-              intl.formatMessage({
-                id: 'common.button.addSelector'
-              })}
-          </Button>
-        )}
-      </ButtonWrapper>
+      {!disabled && (
+        <ButtonWrapper>
+          {button || (
+            <Button variant="filled" color="default" block onClick={onAdd}>
+              <PlusOutlined className="font-size-14" />
+              {btnText ||
+                intl.formatMessage({
+                  id: 'common.button.addSelector'
+                })}
+            </Button>
+          )}
+        </ButtonWrapper>
+      )}
     </Container>
   );
 };

src/components/seal-form/seal-cascader.tsx

@@ -185,7 +185,7 @@ const SealCascader: React.FC<
           onBlur={handleOnBlur}
           onChange={handleChange}
           notFoundContent={null}
-          onDropdownVisibleChange={handleDropdownVisibleChange}
+          onOpenChange={handleDropdownVisibleChange}
         ></Cascader>
       </Wrapper>
     </SelectWrapper>

src/components/seal-form/seal-select.tsx

@@ -18,6 +18,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
     options,
     allowNull,
     isInFormItems = true,
+    notFoundContent = null,
     ...rest
   } = props;
   const intl = useIntl();
@@ -102,7 +103,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
           onFocus={handleOnFocus}
           onBlur={handleOnBlur}
           onChange={handleChange}
-          notFoundContent={null}
+          notFoundContent={notFoundContent}
         >
           {children}
         </Select>

src/components/seal-form/simple-select.tsx

@@ -241,7 +241,7 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
         options={optionsList}
         maxTagCount={0}
         defaultActiveFirstOption={false}
-        dropdownRender={dropdownRender}
+        popupRender={dropdownRender}
         optionRender={optionRender}
         menuItemSelectedIcon={false}
         onChange={handleOnChange}
@@ -250,7 +250,7 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
         onFocus={handleOnFocus}
         onSearch={handleOnSearch}
         filterOption={filterOption}
-        onDropdownVisibleChange={handleOnOpenChange}
+        onOpenChange={handleOnOpenChange}
       ></Select>
     </div>
   );

src/components/seal-form/wrapper/index.tsx

@@ -156,6 +156,7 @@ export const Label = styled.div.attrs<{
 // inner
 const Inner = styled.div`
   width: 100%;
+  display: flex;
 `;
 
 const Extra = styled.div`

src/components/seal-form/wrapper/input.ts

@@ -79,6 +79,7 @@ const InputWrapper = styled.div`
   }
 
   .ant-input-number {
+    flex: 1;
     position: static;
     display: flex;
     align-items: center;
@@ -87,6 +88,7 @@ const InputWrapper = styled.div`
     padding: 0;
     height: ${INPUTHEIGHT}px !important;
     background-color: ${BGCOLOR};
+    flex: 1;
 
     &:hover .ant-input-number-handler-wrap,
     &-focused .ant-input-number-handler-wrap {

src/components/seal-form/wrapper/select.ts

@@ -98,8 +98,8 @@ const SelectWrapper = styled.div`
       height: 54px;
 
       .ant-select-selection-search {
-        top: 20px !important;
-        inset-inline-start: ${INPUT_INNER_PADDING}px;
+        // top: 20px !important;
+        // inset-inline-start: ${INPUT_INNER_PADDING}px;
       }
       &.ant-select-multiple.ant-cascader .ant-select-selection-search {
         top: 0 !important;