Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// @flow
import * as React from "react";
import { storiesOf, action } from "@storybook/react";
import styled from "styled-components";
import Unsort from "../src";
import { initialRows, type Row } from "./table";
const Table = styled.table`
border-collapse: collapse;
font-family: sans-serif;
`;
const Tr = styled.tr``;
const Td = styled.td`
padding: 0.75rem;
border-top: 1px solid #eee;
`;
const Th = Td.extend`
text-align: left;
&:focus,
&:hover {
cursor: ${props => (props.sortable ? "pointer" : "default")};
background-color: ${props => (props.sortable ? "#ffc" : "inherit")};
}
`.withComponent("th");
function getSortDirection(props) {
if (props.direction && props.visible) {
return props.direction === "asc" ? "↓" : "↑";
}
);
})
) : (
{noRecordsFoundText}
)}
);
const HeaderCell = styled.th`
background: ${COLORS.white3};
`;
const TableCell = styled.td`
vertical-align: middle !important;
`;
const EmptyTableCell = styled.td`
padding: 1.65em !important;
vertical-align: middle !important;
color: ${COLORS.greyLight};
`;
const ButtonCell = styled.td`
text-align: right !important;
> .button {
height: auto !important;
padding-top: 1px;
padding-bottom: 1px;
import * as React from 'react';
import styled from 'styled-components';
export interface PatientIntf {
id: string;
name: string;
address: string;
age: number;
}
interface Props {
patient: PatientIntf;
deletePatient: Function;
}
const Cell = styled.td`
padding: 10px 30px;
text-align: center;
`;
class Patient extends React.Component {
deletePatient = () => {
const { patient: {id}, deletePatient } = this.props;
deletePatient(id);
}
render() {
const { patient } = this.props;
return (
Delete
`
export const StyledTableWrapper = styled.div`
margin: 20px 10px;
`
export const StyledTable = styled.table`
width: 100%;
table-layout: fixed;
`
export const StyledTh = styled.th`
text-align: left;
height: 30px;
vertical-align: top;
padding: 5px;
width: ${props => props.width || 'auto'};
`
export const StyledTd = styled.td`
padding: 5px;
width: ${props => props.width || 'auto'};
text-overflow: ellipsis;
overflow: hidden;
`
export const StyledHeaderRow = styled.tr`
border-top: ${props => props.theme.inFrameBorder};
border-bottom: ${props => props.theme.inFrameBorder};
`
export const StyledExpandable = styled.div`
margin: 0 10px;
`
export const StyledAlteringTr = styled.tr`
&:nth-child(even) {
background-color: ${props => props.theme.alteringTableRowBackground};
}
`
export const StyledStrongTd = styled.td`
font-weight: bold;
`
export const StyledTd = styled.td``
export const UnstyledList = styled.ul`
list-style: none;
width: 100%;
`
export const StyledHistoryRow = styled.li`
border: 1px solid black;
margin: 10px;
padding: 10px;
cursor: pointer;
&:hover {
background-color: ${props => props.theme.primaryBackground};
}
`
}
`;
const Table = styled.table`
width: 100%;
border-spacing: 0px;
border: 1px solid #ffffff55;
margin-top: 22px;
border-radius: 5px;
background: #ffffff11;
color: #ffffff;
font-weight: 400;
font-size: 13px;
`;
const Td = styled.td`
white-space: nowrap;
padding: 6px 0px;
border-top: ${(props: { isTop: boolean }) =>
props.isTop ? "none" : "1px solid #ffffff55"};
&:last-child {
padding-right: 16px;
}
`;
const Tr = styled.tr``;
const MailTd = styled(Td)`
padding: 0 12px;
max-width: 186px;
min-width: 186px;
overflow: hidden;
width: 100%;
height: 100px;
display: inline-block;
text-align: center;
position: relative;
top: -14px;
`;
const TitleContainer = styled.div`
width: 100%;
vertical-align: inherit;
border-color: inherit;
color: #333;
text-align: left;
margin:15px 0;
`;
const Title = styled.td`
display: inline-block;
text-align: left;
font-size: 14px;
margin: 0 10px;
`;
const SuccessText = styled.div`
margin-top: 30px;
font-size: 24px;
font-weight: bold;
line-height: 33px;
color: #333;
`;
const SuccessDesText = styled.div`
line-height: 20px;
margin-top: 10px;
font-size: 14px;
import React, {useContext} from 'react';
import styled from 'styled-components';
import {
MeasurementFamily,
getMeasurementFamilyLabel,
getStandardUnitLabel,
} from 'akeneomeasure/model/measurement-family';
import {UserContext} from 'akeneomeasure/context/user-context';
const Container = styled.tr`
height: 54px;
border-bottom: 1px solid ${props => props.theme.color.grey70};
`;
const MeasurementFamilyLabelCell = styled.td`
color: ${props => props.theme.color.purple100};
font-style: italic;
font-weight: bold;
`;
type MeasurementFamilyRowProps = {
measurementFamily: MeasurementFamily;
};
const MeasurementFamilyRow = ({measurementFamily}: MeasurementFamilyRowProps) => {
const locale = useContext(UserContext)('uiLocale');
return (
{getMeasurementFamilyLabel(measurementFamily, locale)}
{measurementFamily.code}
import styled from 'styled-components';
import { textColorMedium } from '../../../../../../styles/themeSelectors';
export const TitleStyled = styled.td`
color: ${textColorMedium};
`;
TitleStyled.displayName = 'TitleStyled';
}
`;
const Tr = styled.tr`
line-height: 2.2em;
cursor: ${(props: { disableHover?: boolean; selected?: boolean }) =>
props.disableHover ? "" : "pointer"};
background: ${(props: { disableHover?: boolean; selected?: boolean }) =>
props.selected ? "#ffffff11" : ""};
:hover {
background: ${(props: { disableHover?: boolean; selected?: boolean }) =>
props.disableHover ? "" : "#ffffff22"};
}
`;
const Td = styled.td`
font-size: 13px;
color: #ffffff;
padding-left: 32px;
`;
const Th = styled.td`
font-size: 13px;
font-weight: 500;
color: #aaaabb;
padding-left: 32px;
`;
const RevisionsTable = styled.table`
width: 100%;
margin-top: 5px;
padding-left: 32px;