antd#ConfigProvider TypeScript Examples

Example = () => {
  const { i18n, t } = useTranslation();
  const [value, onChange] = useState<string | undefined>("$now|$now");

  const size = select<AnyObject>("size", [undefined, "small", "middle", "large"], undefined);

  return (
    <ConfigProvider direction={i18n.dir()}>
      <div style={{ padding: "2em", maxWidth: 450, margin: "auto" }}>
        <Form layout="vertical" size={size}>
          <Form.Item label={t("labelInputRange")}>
            <RelativeRangePicker
              value={value}
              onChange={onChange}
              disabled={boolean("disabled", false)}
              readOnly={boolean("readOnly", false)}
              size={size}
            />
          </Form.Item>
          <Form.Item label="DateUtils.isValid">{DateUtils.isValid(value) ? "Yes" : "No"}</Form.Item>
          <Form.Item label="DateUtils.toString">{DateUtils.toString(value)}</Form.Item>
          <Form.Item label="DateUtils.toISOString">
            {DateUtils.toISOString(value)?.toString()}
          </Form.Item>
        </Form>
      </div>
    </ConfigProvider>
  );
}

export default function ModalControlWrap(Component: typeof React.Component) {
  return function ModalControl(config: any) {
    const div = document.createElement('div');
    document.body.appendChild(div);

    function destroy() {
      const unmountResult = ReactDOM.unmountComponentAtNode(div);
      if (unmountResult && div.parentNode) {
        div.parentNode.removeChild(div);
      }
    }

    function render(props: any) {
      ReactDOM.render(
        <ConfigProvider locale={config.language === 'en' ? antdEnUS : antdZhCN}>
            <Component {...props} />
        </ConfigProvider>,
        div,
      );
    }

    render({ ...config, visible: true, destroy });

    return {
      destroy,
    };
  };
}

function App() {
  const { t, i18n } = useTranslation();
  return (
    <div className='App'>
      <ConfigProvider
        locale={i18n.language == 'en' ? en : zhCN}
        getPopupContainer={(node: HTMLElement) => {
          if (node) {
            return node.parentNode as HTMLElement;
          }
          return document.body;
        }}
        renderEmpty={() => (
          <div style={{ padding: 20 }}>
            <img src='/image/empty.png' width='64' />
            <div className='ant-empty-description'>{t('暂无数据')}</div>
          </div>
        )}
      >
        <Provider store={store as any}>
          <Router>
            <Switch>
              <Route exact path='/job-task/:busiId/output/:taskId/:outputType' component={TaskOutput} />
              <Route exact path='/job-task/:busiId/output/:taskId/:host/:outputType' component={TaskHostOutput} />
              <>
                <HeaderMenu></HeaderMenu>
                <Content></Content>
              </>
            </Switch>
          </Router>
        </Provider>
      </ConfigProvider>
    </div>
  );
}

ReactDOM.render(
  <ConfigProvider locale={locale}>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </ConfigProvider>,
  document.getElementById('root'),
);

function KeepState() {
  const [visible, setVisible] = useState(false)
  return (
      <div style={{ margin: 10 }}>
          <div style={{ marginBottom: 10 }}>
              <Button size="small" onClick={() => { setVisible(true) }}>触发弹窗</Button>
          </div>
          <ConfigProvider locale={zhCN}>
              <Modal
                  title='默认弹窗'
                  visible={visible}
                  itemState={{ keepStateOnClose: true }}
                  onCancel={() => { setVisible(false) }}
              >
                  挂载期-存储弹窗状态（宽高、定位、最大化）
          </Modal>
          </ConfigProvider>
      </div>
  )
}

function BasicUse() {
  const [visible, setVisible] = useState(false);
  return (
    <div style={{ margin: 10 }}>
      <div style={{ marginBottom: 10 }}>
        <Button
          size="small"
          onClick={() => {
            setVisible(true);
          }}
        >
          触发弹窗
        </Button>
      </div>
      <ConfigProvider locale={zhCN}>
        <Modal
          title="默认弹窗"
          visible={visible}
          onCancel={() => {
            setVisible(false);
          }}
        >
          默认宽高520
        </Modal>
      </ConfigProvider>
    </div>
  );
}

usePrefixCls = (
  tag?: string,
  props?: {
    prefixCls?: string;
  },
) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const { clsPrefix } = useContext(EcContext);

  return [`${clsPrefix}-${tag}`, getPrefixCls(tag, props?.prefixCls)];
}

/**
 * 构件的 React 组件包装器，包含 ErrorBoundary, ConfigProvider, FeatureFlagsProvider。
 */
export function BrickWrapper(
  props: React.PropsWithChildren<BrickWrapperProps>
): React.ReactElement {
  const locale =
    i18n.language && i18n.language.split("-")[0] === "en" ? enUS : zhCN;
  // istanbul ignore next
  const featureFlags =
    process.env.NODE_ENV === "test" ? {} : getRuntime().getFeatureFlags();
  return (
    <ErrorBoundary>
      <FeatureFlagsProvider value={featureFlags}>
        <ConfigProvider
          locale={locale}
          autoInsertSpaceInButton={false}
          renderEmpty={() => <EasyopsEmpty {...props.wrapperConfig?.empty} />}
        >
          {props.children}
        </ConfigProvider>
      </FeatureFlagsProvider>
    </ErrorBoundary>
  );
}

export function ShareChartPage() {
  const { i18n } = useTranslation();

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          title="Datart Share Link"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <BrowserRouter>
          <Switch>
            <Route path="/shareChart/:token" component={LazyShareChart} />
          </Switch>
        </BrowserRouter>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Filter = () => {
  const { i18n, t } = useTranslation();
  const [value, onChange] = useState<string | undefined>("$now|$now");

  const size = select<AnyObject>("size", [undefined, "small", "middle", "large"], undefined);

  return (
    <ConfigProvider direction={i18n.dir()}>
      <div style={{ padding: "2em", maxWidth: 450, margin: "auto" }}>
        <Form layout="vertical" size={size}>
          <Form.Item label={t("labelInputRange")}>
            <TimeFilterPicker
              value={value}
              onChange={onChange}
              disabled={boolean("disabled", false)}
              readOnly={boolean("readOnly", false)}
              size={size}
            />
          </Form.Item>
          <Form.Item label="DateUtils.isValid">{DateUtils.isValid(value) ? "Yes" : "No"}</Form.Item>
          <Form.Item label="DateUtils.toString">{DateUtils.toString(value)}</Form.Item>
          <Form.Item label="DateUtils.toISOString">
            {DateUtils.toISOString(value)?.toString()}
          </Form.Item>
        </Form>
      </div>
    </ConfigProvider>
  );
}

Example = () => {
  const { i18n, t } = useTranslation();
  const [value, onChange] = useState<string | undefined>("$now");

  const size = select<AnyObject>("size", [undefined, "small", "middle", "large"], undefined);

  return (
    <ConfigProvider direction={i18n.dir()}>
      <div style={{ padding: "2em", maxWidth: 450, margin: "auto" }}>
        <Form layout="vertical" size={size}>
          <Form.Item label={t("labelInputDate")}>
            <RelativeDatePicker
              value={value}
              onChange={onChange}
              disabled={boolean("disabled", false)}
              readOnly={boolean("readOnly", false)}
              size={size}
            />
          </Form.Item>
          <Form.Item label="DateUtils.isValid">{DateUtils.isValid(value) ? "Yes" : "No"}</Form.Item>
          <Form.Item label="DateUtils.toString">{DateUtils.toString(value)}</Form.Item>
          <Form.Item label="DateUtils.toISOString">
            {DateUtils.toISOString(value)?.toString()}
          </Form.Item>
        </Form>
      </div>
    </ConfigProvider>
  );
}

Example = () => {
  const { i18n, t } = useTranslation();
  return (
    <ConfigProvider direction={i18n.dir()}>
      <div style={{ padding: "2em", maxWidth: 450, margin: "auto" }}>
        <Form layout="vertical">
          <Form.Item label={t("labelRange")}>
            <InlineRangePicker />
          </Form.Item>
        </Form>
      </div>
    </ConfigProvider>
  );
}

export function ShareDashboardPage() {
  const { i18n } = useTranslation();

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          title="Datart Share Link"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route path="/shareDashboard/:token" component={LazyShareDashboard} />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Root = () => {
  return (
    <Provider store={stores}>
      <GlobalStyle></GlobalStyle>
      <HashRouter>
        <ConfigProvider locale={zhCN}>
          <RootRoute></RootRoute>
        </ConfigProvider>
      </HashRouter>
    </Provider>
  )
}

Root = () => {
  return (
    <Provider store={stores}>
      <GlobalStyle></GlobalStyle>
      <ConfigProvider locale={zhCN}>
        <NavigatorLayout></NavigatorLayout>
      </ConfigProvider>
    </Provider>
  )
}

ReactDOM.render(
    <ConfigProvider locale={zhCN}>
        <Provider store={store}>
            <HashRouter>
                <Route component={App} />
            </HashRouter>
        </Provider>
    </ConfigProvider>
    ,
    document.getElementById('root')
)

ReactDOM.render(
    <ConfigProvider locale={zhCN}>
        <Provider store={store}>
            <HashRouter>
                <Route component={App} />
            </HashRouter>
        </Provider>
    </ConfigProvider>
    ,
    document.getElementById('root')
)

I18nProvider = observer(({children, rtlLayout}: I18nProviderProps) => {
  const mainStore = getMainStore()

  const getDirection = useCallback(() => {
    const rtlCondition = rtlLayout
      || localesStore.isRtlLayout(mainStore.locale);

    return rtlCondition ? 'rtl' : 'ltr';
  }, [rtlLayout, mainStore?.locale])

  const i18n = getI18n();

  if (!mainStore || !mainStore.locale) {
    return null;
  }

  return (
    <RawIntlProvider value={i18n}>
      <ConfigProvider
        locale={antdLocalesStore.antdLocaleMapping[mainStore.locale]}
        direction={getDirection()}
      >
        {children}
      </ConfigProvider>
    </RawIntlProvider>
  );
})

Example = () => {
  const { i18n } = useTranslation();

  const eventsFromNames = actions("onChange");

  return (
    <ConfigProvider direction={i18n.dir()}>
      <div style={{ position: "fixed", top: 0, bottom: 0, left: 0, right: 0 }}>
        <PageMaker
          config={config}
          isEditing={boolean("Edit", true)}
          widgets={widgets}
          onAdd={addNew}
          renderWidget={(widget) => <div>Widget here - {widget}</div>}
          {...eventsFromNames}
        />
      </div>
    </ConfigProvider>
  );
}

export function ShareStoryPlayerPage() {
  const { i18n } = useTranslation();

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          title="Datart Share Link"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route
            path="/shareStoryPlayer/:token"
            component={LazyShareStoryPlayer}
          />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

Example = () => {
  const { i18n, t } = useTranslation();
  return (
    <ConfigProvider direction={i18n.dir()}>
      <div style={{ padding: "2em", maxWidth: 450, margin: "auto" }}>
        <Form layout="vertical">
          <Form.Item label={t("labelDate")}>
            <InlineDatePicker />
          </Form.Item>
        </Form>
      </div>
    </ConfigProvider>
  );
}

Layout: React.FC = ({ children }) => {
  return (
    <InspectorWrapper>
      <ConfigProvider locale={zhCN}>{children}</ConfigProvider>
    </InspectorWrapper>
  );
}

MyApp = ({ Component, pageProps }) => {
    const intl = useIntl()
    dayjs.locale(intl.locale)

    const LayoutComponent = Component.container || BaseLayout
    // TODO(Dimitreee): remove this mess later
    const HeaderAction = Component.headerAction
    const RequiredAccess = Component.requiredAccess || React.Fragment

    const {
        EndTrialSubscriptionReminderPopup,
        isEndTrialSubscriptionReminderPopupVisible,
    } = useEndTrialSubscriptionReminderPopup()

    return (
        <>
            <Head>
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
                />
            </Head>
            <ConfigProvider locale={ANT_LOCALES[intl.locale] || ANT_DEFAULT_LOCALE} componentSize={'large'}>
                <CacheProvider value={cache}>
                    <GlobalStyle/>
                    <FocusContextProvider>
                        <TrackingProvider>
                            <OnBoardingProvider>
                                <SubscriptionProvider>
                                    <LayoutContextProvider>
                                        <LayoutComponent menuData={<MenuItems/>} headerAction={HeaderAction}>
                                            <RequiredAccess>
                                                <Component {...pageProps} />
                                                {
                                                    isEndTrialSubscriptionReminderPopupVisible && (
                                                        <EndTrialSubscriptionReminderPopup/>
                                                    )
                                                }
                                            </RequiredAccess>
                                        </LayoutComponent>
                                    </LayoutContextProvider>
                                </SubscriptionProvider>
                            </OnBoardingProvider>
                        </TrackingProvider>
                    </FocusContextProvider>
                    <GoogleAnalytics/>
                    <YandexMetrika/>
                </CacheProvider>
            </ConfigProvider>
            <JIRAServiceDeskWidget/>
        </>
    )
}

PhoneInput: React.FC<IPhoneInputProps> = forwardRef((props, ref) => {
    const { value, placeholder, style, disabled, block, ...otherProps } = props
    const configSize = useContext<SizeType>(ConfigProvider.SizeContext)
    const { organization } = useOrganization()
    const userOrganizationCountry = get(organization, 'country', 'ru')
    const inputRef = useRef<PhoneInputRef>()

    // `AutoComplete` component needs `focus` method of it's direct child component (custom input)
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.numberInputRef.focus()
        },
    }))

    useEffect(() => {
        inputRef.current.numberInputRef.tabIndex = props.tabIndex
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const onChange = useCallback((value) => {
        const formattedValue = value ? '+' + value : value
        if (props.compatibilityWithAntAutoComplete) {
            /*
                `AutoComplete` component uses `rc-select` under the hood, which expects to have
                `onChange` been called with InputEvent object as an argument, but input from `react-phone-input-2`
                calls `onChange` with a String value, for example, here:
                https://github.com/bl00mber/react-phone-input-2/blob/9deb73afdde6d631ab6e7af9544a31a9ff176b3b/src/index.js#L589
                This breaks the code.
                So, just give, what `rc-select/Selector` needs inside of `AutoComplete`.
            */
            const event = {
                target: {
                    value: formattedValue,
                },
            }
            // @ts-ignore
            props.onChange(event)
        } else {
            props.onChange(formattedValue)
        }
    }, [props.onChange])

    const inputStyles = useMemo(() => {
        return getPhoneInputStyles(style, configSize, block)
    }, [style, configSize, block])

    return (
        <ReactPhoneInput
            {...otherProps}
            // @ts-ignore
            ref={inputRef}
            inputClass={'ant-input'}
            value={String(value)}
            country={userOrganizationCountry}
            onChange={onChange}
            disabled={disabled}
            inputStyle={inputStyles}
            placeholder={placeholder}
            buttonStyle={BUTTON_INPUT_PHONE_STYLE}
        />
    )
})

ReactDOM.render(
  <ConfigProvider locale={zhCN}>
    <AppContextProvider>
      <App />
    </AppContextProvider>
  </ConfigProvider>,
  document.getElementById('root')
);

fixContext(ConfigProvider.ConfigContext)

ReactDOM.render(
  <Provider store={store}>
    <ConfigProvider locale={zh_CN}>
      <App />
    </ConfigProvider>
  </Provider>,
  document.getElementById("root")
);

export function App() {
  const dispatch = useDispatch();
  const { i18n } = useTranslation();
  const logged = !!getToken();
  const t = useI18NPrefix('global');
  useAppSlice();

  useLayoutEffect(() => {
    if (logged) {
      dispatch(setLoggedInUser());
    } else {
      if (localStorage.getItem(StorageKeys.LoggedInUser)) {
        message.warning(t('tokenExpired'));
      }
      dispatch(logout());
    }
  }, [dispatch, t, logged]);

  useEffect(() => {
    dispatch(getSystemInfo());
  }, [dispatch]);

  return (
    <ConfigProvider locale={antdLocales[i18n.language]}>
      <BrowserRouter>
        <Helmet
          titleTemplate="%s - Datart"
          defaultTitle="Datart"
          htmlAttributes={{ lang: i18n.language }}
        >
          <meta name="description" content="Data Art" />
        </Helmet>
        <Switch>
          <Route path="/login" component={LazyLoginPage} />
          <Route path="/register" component={LazyRegisterPage} />
          <Route path="/active" component={LazyActivePage} />
          <Route path="/forgetPassword" component={LazyForgetPasswordPage} />
          <Route
            path="/authorization/:token"
            component={LazyAuthorizationPage}
          />
          <LoginAuthRoute />
        </Switch>
        <GlobalStyles />
      </BrowserRouter>
    </ConfigProvider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <ConfigProvider autoInsertSpaceInButton={false} locale={zhCN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>,
  document.getElementById("root")
);