styled-components#ThemeContext JavaScript Examples

UnbondingInitVol = () => {
  const theme = useContext(ThemeContext);
  const coin = useCoinFormatter();
  const color = theme.danger;
  const res = useRequest(API.getUndelegationVol, defaultPeriod.value);
  const undelegationVolComp = useChartFormatter(res.resp);
  const chartName = `Initiated unbonding per day/hour volume (${coin})`;

  return (
    <ChartContainer
      title={chartName}
      select={
        <SelectPeriod
          defaultPeriod={defaultPeriod}
          isDisabled={res.isLoading}
          onChange={res.request}
        />
      }
      chart={
        <AreaChart
          areaName={areaName}
          isLoading={res.isLoading}
          data={undelegationVolComp}
          yAxisLabelsFormatter={formatTokenAmount}
          yAxisWidth={yAxisWidth}
          yTickCount={yTickCount}
          yAxisDomain={[
            (dataMin) => Math.round(dataMin),
            (dataMax) => Math.round(dataMax),
          ]}
          xAxisTickFormatter={formatDate}
          tooltipFormatter={formatToken}
          tooltipLabelFormatter={formatDateWithTime}
          color={color}
        />
      }
    />
  );
}

EmptyOrderRow = () => {
  const theme = useContext(ThemeContext);
  return (
    <CompactOrderTableRow style={{ userSelect: 'none' }}>
      <CompactOrderTablePriceColumn
        style={{ color: theme.inputPlaceHolderColor }}
      >
        -
      </CompactOrderTablePriceColumn>
      <CompactOrderTableSizeColumn
        style={{ color: theme.inputPlaceHolderColor }}
      >
        -
      </CompactOrderTableSizeColumn>
      <CompactOrderTablePositionColumn
        style={{ color: theme.inputPlaceHolderColor }}
      >
        -
      </CompactOrderTablePositionColumn>
    </CompactOrderTableRow>
  );
}

EmptyTableIndicator = ({ text, ...props }) => {
  const theme = useContext(ThemeContext);
  if (props.loading) {
    return <div />;
  }

  return (
    <EmptyTableIndicatorWrapper>
      <img
        style={{
          marginTop: props.marginTop,
          width: "68px",
          height: "auto",
          userSelect: "none",
          opacity: "1",
        }}
        src={`assets/images/${theme.imgDir}/no-data.svg`}
        alt="No Data"
        draggable="false"
      />
      <div
        style={{
          paddingTop: "2px",
          fontSize: "0.85rem",
          marginBottom: props.marginTop,
        }}
      >
        <I s={text} />
      </div>
    </EmptyTableIndicatorWrapper>
  );
}

TradePanelWarnMessage = ({ show, message }) => {
  return (
    <div
      style={{
        display: show ? 'initial' : 'none',
        fontSize: '0.85rem',
        color: useContext(ThemeContext).orange,
        height: '24px',
        fontWeight: '600',
      }}
    >
      <FontAwesomeIcon
        style={{ marginRight: '8px' }}
        size="1x"
        icon={faExclamationTriangle}
      />
      <I s={message} />
    </div>
  );
}

Home = () => {
    const { id, setTheme } = useContext(ThemeContext);

    return (
        <>
            <StyledHeader>
                <Toggle isDark={id === 'dark'} onToggle={setTheme} />
            </StyledHeader>
            <Container>
                <Logo width="280px" />
                <Form displaySpan />
            </Container>
        </>

    );
}

NumOfDelegators = () => {
  const { address } = useParams();
  const theme = useContext(ThemeContext);
  const color = theme.navyBlue;
  const { resp, isLoading } = useRequest(API.getNumOfDelegators, address);
  const numOfDelegators = useChartFormatter(resp);

  return (
    <ChartContainer
      title={chartName}
      chart={
        <AreaChart
          areaName={areaName}
          isLoading={isLoading}
          data={numOfDelegators}
          yAxisLabelsFormatter={formatLabels}
          yAxisWidth={yAxisWidth}
          yTickCount={yTickCount}
          yAxisDomain={['dataMin', 'dataMax']}
          xAxisTickFormatter={formatDate}
          tooltipFormatter={formatNum}
          tooltipLabelFormatter={formatDateWithTime}
          color={color}
        />
      }
    />
  );
}

TradePanelErrorMessage = ({
  show,
  errorMessage1,
  errorToken,
  errorMessage2,
}) => {
  return (
    <div
      style={{
        display: show ? 'initial' : 'none',
        fontSize: '0.85rem',
        color: useContext(ThemeContext).red,
        height: '24px',
        fontWeight: '600',
      }}
    >
      <FontAwesomeIcon
        style={{ marginRight: '8px' }}
        size="1x"
        icon={faExclamationTriangle}
      />
      <I s={errorMessage1} />
      {errorToken}
      <I s={errorMessage2} />
    </div>
  );
}

ThemeContext.Extend = function (_ref) {
  var children = _ref.children,
      value = _ref.value;
  return React.createElement(ThemeContext.Consumer, null, function (theme) {
    return React.createElement(ThemeContext.Provider, {
      value: deepMerge(theme, value)
    }, children);
  });
};

OperationsPerBlock = () => {
  const theme = useContext(ThemeContext);
  const color = theme.danger;

  return (
    <Card>
      <Card.Header>
        <TitleChart>Operations per block</TitleChart>
      </Card.Header>

      <Card.Body>
        <AreaChart
          data={data}
          yAxisWidth={yAxisWidth}
          yTickCount={yTickCount}
          areaName={areaName}
          color={color}
        />
      </Card.Body>
    </Card>
  );
}

SecondaryNavBar = ({ selected, subPages }) => {
  const theme = useContext(ThemeContext);
  return (
    <div
      style={{
        paddingLeft: "260px",
        paddingRight: "60px",
        paddingBottom: "0px",
        borderWidth: "0px",
        backgroundColor: theme.secondaryNavbarBackground,
      }}
    >
      <Button.Group
        style={{
          borderRadius: "0px",
          borderWidth: "0px",
          paddingBottom: "0px",
        }}
      >
        {subPages.map((config, i) => (
          <NavButton
            key={i}
            selected={selected}
            id={config.id}
            href={config.url}
            label={<I s={config.label} />}
          />
        ))}
      </Button.Group>
    </div>
  );
}

EmptyTableIndicator = ({ text, ...props }) => {
  const theme = useContext(ThemeContext);
  if (props.loading) {
    return <div />;
  }

  return (
    <EmptyTableIndicatorWrapper>
      <img
        style={{
          marginTop: props.marginTop,
          width: '68px',
          height: 'auto',
          userSelect: 'none',
          opacity: '1',
        }}
        src={`/assets/images/${theme.imgDir}/no-data.svg`}
        alt="No Data"
        draggable="false"
      />
      <div
        style={{
          paddingTop: '2px',
          fontSize: '0.85rem',
          marginBottom: props.marginTop,
        }}
      >
        <I s={text} />
      </div>
    </EmptyTableIndicatorWrapper>
  );
}

TradePanelWarnMessage = ({ show, message }) => {
  return (
    <div
      style={{
        display: show ? "initial" : "none",
        fontSize: "0.85rem",
        color: useContext(ThemeContext).orange,
        height: "24px",
        fontWeight: "600",
      }}
    >
      <FontAwesomeIcon
        style={{ marginRight: "8px" }}
        size="1x"
        icon={faExclamationTriangle}
      />
      <I s={message} />
    </div>
  );
}

TableLoadingSpin = ({ children, loading }) => {
  const theme = useContext(ThemeContext);
  return (
    <Spin
      spinning={loading ? true : false}
      size="large"
      indicator={
        <img
          alt="loading..."
          src={`/assets/images/${theme.imgDir}/bars.svg`}
          style={{
            marginTop: '100px',
            height: '40px',
            opacity: '1',
          }}
        />
      }
    >
      {children}
    </Spin>
  );
}

EmptyOrderRow = () => {
  const theme = useContext(ThemeContext);
  return (
    <CompactOrderTableRow style={{ userSelect: "none" }}>
      <CompactOrderTablePriceColumn
        style={{ color: theme.inputPlaceHolderColor }}
      >
        -
      </CompactOrderTablePriceColumn>
      <CompactOrderTableSizeColumn
        style={{ color: theme.inputPlaceHolderColor }}
      >
        -
      </CompactOrderTableSizeColumn>
      <CompactOrderTablePositionColumn
        style={{ color: theme.inputPlaceHolderColor }}
      >
        -
      </CompactOrderTablePositionColumn>
    </CompactOrderTableRow>
  );
}

PanelHeader = ({ headerText }) => {
  const theme = useContext(ThemeContext);

  return (
    <div
      style={{
        height: '44px',
        lineHeight: '20px',
        paddingTop: '12px',
        paddingBottom: '12px',
        paddingLeft: '0px',
        paddingRight: '0px',
        position: 'relative',
        fontWeight: '600',
        fontSize: '0.9rem',
        userSelect: 'none',
        color: theme.textWhite,
      }}
    >
      {headerText}
    </div>
  );
}

TableLoadingSpin = ({ children, loading }) => {
  const theme = useContext(ThemeContext);
  return (
    <Spin
      spinning={loading ? true : false}
      size="large"
      indicator={
        <img
          alt="loading..."
          src={`assets/images/${theme.imgDir}/bars.svg`}
          style={{
            marginTop: "100px",
            height: "40px",
            opacity: "1",
          }}
        />
      }
    >
      {children}
    </Spin>
  );
}

PieChart = ({ starData }) => {
    const themeContext = useContext(ThemeContext);

    let data = {};

    if (starData.data) {

        // Only display chart if there is at least 1 star available
        let sum = starData.data.reduce((a, b) => a + b, 0);
        if (sum > 0) {
            data = {
                labels: starData.label,
                datasets: [
                    {
                        label: "",
                        data: starData.data,
                        backgroundColor: bgColor,
                        borderWidth: 0,
                    },
                ],
            };
        }
    }

    return (
        <>
            <Pie
                data={data}
                // height={300}
                options={{
                    maintainAspectRatio: false,
                    responsive: true,
                    aspectRatio: 1,
                    title: {
                        display: false,
                    },
                    legend: {
                        // display: false,
                        position: "bottom",
                        labels: {
                            fontColor: themeContext.textColor,
                        }
                    },
                }}
            />
        </>
    );
}

PayTable = ({
  columnBuilders,
  rowData,
  emptyText,
  margin,
  loading,
}) => {
  const theme = useContext(ThemeContext);
  const _rowData = rowData || [];
  const customizeRenderEmpty = () => <EmptyTableIndicator text={emptyText} />;

  const columns = columnBuilders.map((builder, j) => ({
    ...builder,
    dataIndex: "col_" + j,
  }));

  const dataSource = _rowData.map((row, i) => {
    var rowValue = { key: i };

    columnBuilders.forEach((builder, j) => {
      rowValue["col_" + j] = (
        <Cell margin={margin}>{builder.getColValue(row)}</Cell>
      );
    });

    return rowValue;
  });

  return (
    <SimpleTableContainer>
      <ConfigProvider
        renderEmpty={dataSource.length === 0 && customizeRenderEmpty}
      >
        <TableLoadingSpin loading={loading}>
          <Table
            showHeader={false}
            tableLayout="auto"
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />
        </TableLoadingSpin>
        {/* {dataSource.length > 10 ? (
          <Pagination
            style={{
              padding: '30px 0px',
              background: theme.background,
              textAlign: 'center',
            }}
            size=""
            total={dataSource.length}
            pageSize={10}
          />
        ) : (
          <div />
        )} */}
      </ConfigProvider>
    </SimpleTableContainer>
  );
}

function useTheme() {
	const themeContext = useContext(ThemeContext);

	return themeContext;
}

SideBarDrawer = ({ header, body, footer, onClose, visible }) => {
  const theme = useContext(ThemeContext);
  return (
    <Drawer
      width={241}
      placement="right"
      closable={false}
      onClose={onClose}
      visible={visible}
      drawerStyle={{
        fontSize: "0.85rem",
        background: theme.sidePanelBackground,
      }}
      bodyStyle={{
        padding: "0",
      }}
      headerStyle={{
        height: 0,
      }}
    >
      <Layout
        onMouseLeave={onClose}
        style={{
          background: "transparent",
          height: "100vh",
        }}
      >
        <div
          style={{
            background: theme.popupHeaderBackground,
            textAlign: "center",
            width: "100%",
            height: AppLayout.topNavBarHeight,
            lineHeight: AppLayout.topNavBarHeight,
          }}
        >
          {header}
        </div>
        <Content>{body}</Content>
      </Layout>
    </Drawer>
  );
}

BarChart = ({ sizeData }) => {
    const themeContext = useContext(ThemeContext);

    const data = {
        labels: [],
        datasets: [
            {
                label: "",
                data: [],
                backgroundColor: bgColor,
            },
        ],
    };
    data.labels = sizeData.label;
    data.datasets[0].data = sizeData.data;

    const scales = {
        xAxes: [
            {
                ticks: {
                    fontColor: themeContext.textColor,
                    fontFamily: "'Roboto', sans-serif",
                    fontSize: 12,
                },
            },
        ],
        yAxes: [
            {
                ticks: {
                    fontColor: themeContext.textColor,
                    beginAtZero: true,
                    fontFamily: "'Roboto', sans-serif",
                    fontSize: 12,
                },
            },
        ],
    };

    return (
        <>
            <Bar
                data={data}
                options={{
                    maintainAspectRatio: false,
                    responsive: true,
                    title: {
                        display: false,
                        text: "Biggest Repos in Size (kb)",
                        fontSize: 25,
                    },
                    legend: {
                        display: false,
                        position: "right",
                    },
                    scales: scales
                }}

            />
        </>
    );
}

PrettyFilled = ({ filled }) => {
  const theme = useContext(ThemeContext);

  return <span style={{ color: theme.textWhite }}>{filled}</span>;
}

DoughnutChart = () => {
    const themeContext = useContext(ThemeContext);

    const data = {
        labels: [],
        datasets: [
            {
                label: "",
                data: [],
                backgroundColor: bgColor,
                borderWidth: 0,
            },
        ],
    };

    return (
        <LanguageContext.Consumer>
            {(context) => {
                const LIMIT = 10;
                let labels = context.map((obj) => obj.label);

                // If more than LIMIT languages then reduce it to the limit
                if (labels.length >= LIMIT) {
                    labels = labels.slice(0, LIMIT);
                }
                const value = context.map((obj) => obj.value).slice(0, LIMIT);
                data.labels = labels;
                data.datasets[0].data = value;

                return (
                    <Doughnut
                        data={data}
                        options={{
                            maintainAspectRatio: false,
                            responsive: true,
                            title: {
                                display: false,
                            },
                            legend: {
                                // display: false,
                                position: "bottom",
                                labels: {
                                    fontColor: themeContext.textColor,
                                }
                            },
                        }}
                    />
                );
            }}
        </LanguageContext.Consumer>
    );
}

WidgetStats = ({
  title,
  mainInfo,
  sparklineData,
  extraInfo,
  isVertical,
  tooltip,
}) => {
  const theme = useContext(ThemeContext);

  return (
    <Card modifiers="height100">
      <CardBodyWidget>
        <WidgetItem isVertical={isVertical}>
          {tooltip ? (
            <OverlayTrigger
              delay={{ show: 250, hide: 400 }}
              overlay={<Tooltip id="title-tooltip">{tooltip}</Tooltip>}
            >
              <TitleMinor>{title}</TitleMinor>
            </OverlayTrigger>
          ) : (
            <TitleMinor>{title}</TitleMinor>
          )}
          <div>
            {sparklineData && sparklineData.length > 1 && (
              <div>
                <Sparkline
                  data={sparklineData}
                  color={
                    sparklineData[sparklineData.length - 1].y >
                    sparklineData[0].y
                      ? theme.success
                      : theme.danger
                  }
                />
              </div>
            )}
          </div>
        </WidgetItem>
        <WidgetItem>
          <div>{mainInfo}</div>
          <div>
            {sparklineData && sparklineData.length && (
              <Percent
                prevVal={sparklineData[0].y}
                currVal={sparklineData[sparklineData.length - 1].y}
              />
            )}
            {extraInfo}
          </div>
        </WidgetItem>
      </CardBodyWidget>
    </Card>
  );
}

SideBarDrawer = ({ header, body, footer, onClose, visible }) => {
  const theme = useContext(ThemeContext);
  return (
    <Drawer
      width={241}
      placement="right"
      closable={false}
      onClose={onClose}
      visible={visible}
      drawerStyle={{
        fontSize: '0.85rem',
        background: theme.sidePanelBackground,
      }}
      bodyStyle={{
        padding: '0',
      }}
      headerStyle={{
        height: 0,
      }}
    >
      <Layout
        onMouseLeave={onClose}
        style={{
          background: 'transparent',
          height: '100vh',
        }}
      >
        <div
          style={{
            background: theme.popupHeaderBackground,
            textAlign: 'center',
            width: '100%',
            height: AppLayout.topNavBarHeight,
            lineHeight: AppLayout.topNavBarHeight,
          }}
        >
          {header}
        </div>
        <Content>{body}</Content>
      </Layout>
    </Drawer>
  );
}

Anchor = forwardRef(function (_ref, ref) {
  var a11yTitle = _ref.a11yTitle,
      children = _ref.children,
      color = _ref.color,
      disabled = _ref.disabled,
      href = _ref.href,
      icon = _ref.icon,
      label = _ref.label,
      _onBlur = _ref.onBlur,
      onClick = _ref.onClick,
      _onFocus = _ref.onFocus,
      reverse = _ref.reverse,
      rest = _objectWithoutPropertiesLoose(_ref, ["a11yTitle", "children", "color", "disabled", "href", "icon", "label", "onBlur", "onClick", "onFocus", "reverse"]);

  var theme = useContext(ThemeContext) || defaultProps.theme;

  var _useState = useState(),
      focus = _useState[0],
      setFocus = _useState[1];

  useEffect(function () {
    if ((icon || label) && children) {
      console.warn('Anchor should not have children if icon or label is provided');
    }
  }, [children, icon, label]);
  var coloredIcon = icon;

  if (icon && !icon.props.color) {
    coloredIcon = cloneElement(icon, {
      color: normalizeColor(color || theme.anchor.color, theme)
    });
  }

  var first = reverse ? label : coloredIcon;
  var second = reverse ? coloredIcon : label;
  return React.createElement(StyledAnchor, _extends({}, rest, {
    ref: ref,
    "aria-label": a11yTitle,
    colorProp: color,
    disabled: disabled,
    hasIcon: !!icon,
    focus: focus,
    hasLabel: label,
    reverse: reverse,
    href: !disabled ? href : undefined,
    onClick: !disabled ? onClick : undefined,
    onFocus: function onFocus(event) {
      setFocus(true);
      if (_onFocus) _onFocus(event);
    },
    onBlur: function onBlur(event) {
      setFocus(false);
      if (_onBlur) _onBlur(event);
    }
  }), first && second ? React.createElement(Box, {
    as: "span",
    direction: "row",
    align: "center",
    gap: "small",
    style: {
      display: 'inline-flex'
    }
  }, first, second) : first || second || children);
})

VoterActivity = ({ isLoading, data }) => {
  const theme = useContext(ThemeContext);
  const [proposals, setProposals] = useState([]);
  const [currVoterType, setCurrVoterType] = useState(voterTypes[0]);

  useEffect(() => {
    setProposals(handleProposals(data, currVoterType));
  }, [data, currVoterType]);

  const handleChange = (opt) => {
    setCurrVoterType(opt.value);
  };

  return (
    <ChartContainer
      title={chartName}
      titleTooltip={tooltipTxt}
      select={(
        <SelectCustom
          opts={voterTypes}
          defaultOpt={voterTypes[0]}
          onChange={handleChange}
        />
      )}
      chart={(
        <BarChart
          isLoading={isLoading}
          data={proposals}
          yAxisWidth={yAxisWidth}
          yAxisTickCount={yAxisTickCount}
          yAxisLabelsFormatter={formatNum}
          xAxisTickFormatter={formatId}
          tooltipLabelFormatter={tooltipLabelFormatter}
          tooltipFormatter={formatNum}
          barColor={theme.navyBlue}
          barName={barName}
        />
      )}
    />
  );
}

_defineProperty(LayerContainer, "contextType", ThemeContext);

Editor = (props) => {  
    const theme = useContext(ThemeContext);        
    const tab = props.path;
    const fTabName = tab.charAt(0).toUpperCase();
    const rTabName = tab.slice(1);
    const content = props.data && props.data[tab];       
    const head = `import ${fTabName}${rTabName} from '${fTabName}${rTabName}'`;
    
    let count = 0, color = '';
    
    const header = head.split(' ').map((str, index) => {
        return (
            <Span 
                initial={{ y: -50 }}
                animate={{y: 0}}
                transition={{ duration: .3 }}  
                key={str} color={theme.headerColor[`color${index}`]}>
                {str} 
                </Span>
            )
    });

    const detail = content.split("\n").map((str, index) => {
        if (count >= 6) count = 0;
        if (index >= 6) {
            color = theme.contentColor[`color${count}`];
            count++;
        } else {
            color = theme.contentColor[`color${index}`]
        }      
        
        let renderPre = (
            <Pre 
                initial={{ x: 10 }}
                animate={{x: 0}}
                whileHover={{ x: 5 }} 
                transition={{ duration: .2 }} 
                key={`${str + index}-detail`} 
                color={color}
            >{str}</Pre>
        );

        if (str.includes('href=')) {
            renderPre = (
                <Pre 
                    initial={{ x: 10 }}
                    animate={{x: 0}}
                    whileHover={{ x: 5 }} 
                    transition={{ duration: .2 }} 
                    key={`${str + index}-detail`} 
                    color={color}
                    dangerouslySetInnerHTML={{__html: str}}></Pre>
            )
        } 

        return (
            <PageWrap key={index}>
                <LineNo>{index + 2}</LineNo>
                {renderPre}
            </PageWrap>
        )
    });
    
    return (
        <Wrapper>
            <FirstLineNo>1</FirstLineNo>
            {header}
            {detail}
        </Wrapper>
    )
}