react-icons/fa#FaCode JavaScript Examples
The following examples show how to use
react-icons/fa#FaCode.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Table.js From dm2 with Apache License 2.0 | 4 votes |
|
Table = observer(
({
view,
data,
cellViews,
selectedItems,
focusedItem,
decoration,
stopInteractions,
onColumnResize,
onColumnReset,
headerExtra,
...props
}) => {
const tableHead = useRef();
const columns = prepareColumns(props.columns, props.hiddenColumns);
const Decoration = useMemo(() => Decorator(decoration), [decoration]);
const { api } = useSDK();
if (props.onSelectAll && props.onSelectRow) {
columns.unshift({
id: "select",
headerClassName: "select-all",
cellClassName: "select-row",
style: {
width: 40,
maxWidth: 40,
justifyContent: "center",
},
onClick: (e) => e.stopPropagation(),
Header: () => {
return (
<SelectionObserver
selection={selectedItems}
onSelect={props.onSelectAll}
className="select-all"
/>
);
},
Cell: ({ data }) => {
return (
<SelectionObserver
id={data.id}
selection={selectedItems}
onSelect={() => props.onSelectRow(data.id)}
/>
);
},
});
}
columns.push({
id: "show-source",
cellClassName: "show-source",
style: {
width: 40,
maxWidth: 40,
justifyContent: "center",
},
onClick: (e) => e.stopPropagation(),
Header() {
return <div style={{ width: 40 }} />;
},
Cell({ data }) {
let out = JSON.parse(data.source ?? "{}");
out = {
id: out?.id,
data: out?.data,
annotations: out?.annotations,
predictions: out?.predictions,
};
const onTaskLoad = async () => {
const response = await api.task({ taskID: out.id });
return response ?? {};
};
return (
<Tooltip title="Show task source">
<Button
type="link"
style={{ width: 32, height: 32, padding: 0 }}
onClick={() => {
modal({
title: "Source for task " + out?.id,
style: { width: 800 },
body: <TaskSourceView content={out} onTaskLoad={onTaskLoad} />,
});
}}
icon={<Icon icon={FaCode}/>}
/>
</Tooltip>
);
},
});
const contextValue = {
columns,
data,
cellViews,
};
const tableWrapper = useRef();
useEffect(() => {
const highlightedIndex = data.indexOf(focusedItem) - 1;
const highlightedElement = tableWrapper.current?.children[highlightedIndex];
if (highlightedElement) highlightedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, [tableWrapper.current]);
return (
<>
{view.root.isLabeling && (
<Block name="column-selector">
<Elem
name="button"
tag={FieldsButton}
icon={<LsGear />}
wrapper={FieldsButton.Checkbox}
style={{ padding: 0 }}
/>
</Block>
)}
<TableBlock
ref={tableWrapper}
name="table"
mod={{ fit: props.fitToContent }}
>
<TableContext.Provider value={contextValue}>
<TableHead
ref={tableHead}
order={props.order}
columnHeaderExtra={props.columnHeaderExtra}
sortingEnabled={props.sortingEnabled}
onSetOrder={props.onSetOrder}
stopInteractions={stopInteractions}
onTypeChange={props.onTypeChange}
decoration={Decoration}
onResize={onColumnResize}
onReset={onColumnReset}
extra={headerExtra}
/>
{data.map((row, index) => {
return (
<RowRenderer
key={`${row.id}-${index}`}l
row={row}
index={index}
onRowClick={props.onRowClick}
stopInteractions={stopInteractions}
rowHeight={props.rowHeight}
fitContent={props.fitToContent}
decoration={Decoration}
/>
);
})}
</TableContext.Provider>
</TableBlock>
</>
);
},
)
Example #2
| Source File: Table.js From dm2 with Apache License 2.0 | 4 votes |
|
Table = observer(
({
view,
data,
cellViews,
selectedItems,
focusedItem,
decoration,
stopInteractions,
onColumnResize,
onColumnReset,
headerExtra,
...props
}) => {
const tableHead = useRef();
const listRef = useRef();
const columns = prepareColumns(props.columns, props.hiddenColumns);
const Decoration = useMemo(() => Decorator(decoration), [decoration]);
const { api } = useSDK();
if (props.onSelectAll && props.onSelectRow) {
columns.unshift({
id: "select",
headerClassName: "select-all",
cellClassName: "select-row",
style: {
width: 40,
maxWidth: 40,
justifyContent: "center",
},
onClick: (e) => e.stopPropagation(),
Header: () => {
return (
<TableCheckboxCell
checked={selectedItems.isAllSelected}
indeterminate={selectedItems.isIndeterminate}
onChange={() => props.onSelectAll()}
className="select-all"
/>
);
},
Cell: ({ data }) => {
return (
<TableCheckboxCell
checked={selectedItems.isSelected(data.id)}
onChange={() => props.onSelectRow(data.id)}
/>
);
},
});
}
columns.push({
id: "show-source",
cellClassName: "show-source",
style: {
width: 40,
maxWidth: 40,
justifyContent: "center",
},
onClick: (e) => e.stopPropagation(),
Header() {
return <div style={{ width: 40 }} />;
},
Cell({ data }) {
let out = JSON.parse(data.source ?? "{}");
out = {
id: out?.id,
data: out?.data,
annotations: out?.annotations,
predictions: out?.predictions,
};
const onTaskLoad = async () => {
const response = await api.task({ taskID: out.id });
return response ?? {};
};
return (
<Tooltip title="Show task source">
<Button
type="link"
style={{ width: 32, height: 32, padding: 0 }}
onClick={() => {
modal({
title: "Source for task " + out?.id,
style: { width: 800 },
body: <TaskSourceView content={out} onTaskLoad={onTaskLoad} />,
});
}}
icon={<Icon icon={FaCode}/>}
/>
</Tooltip>
);
},
});
const contextValue = {
columns,
data,
cellViews,
};
const headerHeight = 43;
const renderTableHeader = useCallback(
({ style }) => (
<TableHead
ref={tableHead}
style={style}
order={props.order}
columnHeaderExtra={props.columnHeaderExtra}
sortingEnabled={props.sortingEnabled}
onSetOrder={props.onSetOrder}
stopInteractions={stopInteractions}
onTypeChange={props.onTypeChange}
decoration={Decoration}
onResize={onColumnResize}
onReset={onColumnReset}
extra={headerExtra}
/>
),
[
props.order,
props.columnHeaderExtra,
props.sortingEnabled,
props.onSetOrder,
props.onTypeChange,
stopInteractions,
view,
view.selected.list,
view.selected.all,
tableHead,
],
);
const renderRow = useCallback(
({ style, index }) => {
const row = data[index - 1];
const isEven = index % 2 === 0;
return (
<TableRow
key={row.id}
data={row}
even={isEven}
onClick={(row, e) => props.onRowClick(row, e)}
stopInteractions={stopInteractions}
wrapperStyle={style}
style={{
height: props.rowHeight,
width: props.fitContent ? "fit-content" : "auto",
}}
decoration={Decoration}
/>
);
},
[
data,
props.fitContent,
props.onRowClick,
props.rowHeight,
stopInteractions,
selectedItems,
view,
view.selected.list,
view.selected.all,
],
);
const isItemLoaded = useCallback(
(index) => {
return props.isItemLoaded(data, index);
},
[props, data],
);
const cachedScrollOffset = useRef();
const initialScrollOffset = useCallback((height) => {
if (isDefined(cachedScrollOffset.current)) {
return cachedScrollOffset.current;
}
const { rowHeight: h } = props;
const index = data.indexOf(focusedItem);
if (index >= 0) {
const scrollOffset = index * h - height / 2 + h / 2; // + headerHeight
return cachedScrollOffset.current = scrollOffset;
} else {
return 0;
}
}, []);
const itemKey = useCallback(
(index) => {
if (index > (data.length - 1)) {
return index;
}
return data[index]?.key ?? index;
},
[data],
);
useEffect(() => {
const listComponent = listRef.current?._listRef;
if (listComponent) {
listComponent.scrollToItem(data.indexOf(focusedItem), "center");
}
}, [data]);
const tableWrapper = useRef();
const right = tableWrapper.current?.firstChild?.firstChild.offsetWidth -
tableWrapper.current?.firstChild?.firstChild?.firstChild.offsetWidth || 0;
return (
<>
{view.root.isLabeling && (
<Block
name="columns__selector"
style={{
right,
}}
>
<FieldsButton
wrapper={FieldsButton.Checkbox}
icon={<LsGear />}
style={{
padding: 0,
zIndex: 1000,
borderRadius: 0,
height: "45px",
width: "45px",
margin: "-1px",
}}
/>
</Block>
)}
<TableBlock
ref={tableWrapper}
name="table"
mod={{ fit: props.fitToContent }}
>
<TableContext.Provider value={contextValue}>
<StickyList
ref={listRef}
overscanCount={10}
itemHeight={props.rowHeight}
totalCount={props.total}
itemCount={data.length + 1}
itemKey={itemKey}
innerElementType={innerElementType}
stickyItems={[0]}
stickyItemsHeight={[headerHeight]}
stickyComponent={renderTableHeader}
initialScrollOffset={initialScrollOffset}
isItemLoaded={isItemLoaded}
loadMore={props.loadMore}
>
{renderRow}
</StickyList>
</TableContext.Provider>
</TableBlock>
</>
);
},
)
Example #3
| Source File: SingleProject.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function SingleProject({ id, name, desc, tags, code, demo, image, theme }) {
const useStyles = makeStyles((t) => ({
iconBtn: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 40,
borderRadius: 50,
border: `2px solid ${theme.tertiary}`,
color: theme.tertiary,
transition: 'all 0.2s',
'&:hover': {
backgroundColor: theme.secondary,
color: theme.primary,
transform: 'scale(1.1)',
border: `2px solid ${theme.secondary}`,
},
},
icon: {
fontSize: '1.1rem',
transition: 'all 0.2s',
'&:hover': {},
},
}));
const classes = useStyles();
return (
<Fade bottom>
<div
key={id}
className='singleProject'
style={{ backgroundColor: theme.primary400 }}
>
<div className='projectContent'>
<h2
id={name.replace(' ', '-').toLowerCase()}
style={{ color: theme.tertiary }}
>
{name}
</h2>
<img src={image ? image : placeholder} alt={name} />
<div className='project--showcaseBtn'>
<a
href={demo}
target='_blank'
rel='noreferrer'
className={classes.iconBtn}
aria-labelledby={`${name
.replace(' ', '-')
.toLowerCase()} ${name
.replace(' ', '-')
.toLowerCase()}-demo`}
>
<FaPlay
id={`${name
.replace(' ', '-')
.toLowerCase()}-demo`}
className={classes.icon}
aria-label='Demo'
/>
</a>
<a
href={code}
target='_blank'
rel='noreferrer'
className={classes.iconBtn}
aria-labelledby={`${name
.replace(' ', '-')
.toLowerCase()} ${name
.replace(' ', '-')
.toLowerCase()}-code`}
>
<FaCode
id={`${name
.replace(' ', '-')
.toLowerCase()}-code`}
className={classes.icon}
aria-label='Code'
/>
</a>
</div>
</div>
<p
className='project--desc'
style={{
background: theme.secondary,
color: theme.tertiary,
}}
>
{desc}
</p>
<div
className='project--lang'
style={{
background: theme.secondary,
color: theme.tertiary80,
}}
>
{tags.map((tag, id) => (
<span key={id}>{tag}</span>
))}
</div>
</div>
</Fade>
);
}
Example #4
| Source File: index.js From FinDevs with MIT License | 4 votes |
|
export default function SignUpForm({ history }) {
const [gitUser, setGitUser] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [techs, setTechs] = useState([]);
const [latitude, setLatitude] = useState('');
const [longitude, setLongitude] = useState('');
useEffect(() => {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
setLatitude(latitude);
setLongitude(longitude);
},
(err) => {
console.log(err);
},
{
timeout: 30000,
},
);
}, []);
async function handleSubmit(e) {
e.preventDefault();
try {
if (confirmPassword !== password) {
setConfirmPassword('');
setPassword('');
throw 'Passwords does not match.';
}
if (password.length < 6) {
setConfirmPassword('');
setPassword('');
throw 'This password is too short! (min 6 characters)';
}
const newDev = await api.post('/devs', {
github_user: gitUser,
password,
techs,
latitude,
longitude,
});
history.push('/');
} catch (err) {
await Swal.fire({
title: err.response ? err.response.data.error : err,
icon: 'error',
confirmButtonColor: '#7159c1',
});
}
}
return (
<Form onSubmit={handleSubmit}>
<img src={logo} alt="FinDevs" />
<div className="input-block">
<label htmlFor="GitHub User">
<FaGithubAlt />
</label>
<input
name="github_user"
id="github_user"
placeholder="GitHub User"
required
onChange={(e) => {
setGitUser(e.target.value);
}}
/>
</div>
<div className="input-block">
<label htmlFor="password">
<FaKey />
</label>
<input
name="password"
id="password"
type="password"
placeholder="Password"
required
onChange={(e) => {
setPassword(e.target.value);
}}
value={password}
/>
<input
name="confirmPassword"
id="confirmPassword"
type="password"
placeholder="Confirm Password"
required
onChange={(e) => {
setConfirmPassword(e.target.value);
}}
value={confirmPassword}
/>
</div>
<div className="input-block">
<label htmlFor="techs">
<FaCode />
</label>
<input
name="techs"
id="techs"
placeholder="Your main Techs splited by comma"
required
onChange={(e) => {
setTechs(e.target.value);
}}
/>
</div>
<div className="input-group">
<div className="input-block">
<label htmlFor="location">
<FaCompass />
</label>
<input
name="Latitude"
type="number"
id="Latitude"
placeholder="Latitude"
value={latitude}
onChange={(e) => setLatitude(e.target.value)}
/>
<input
name="Longitude"
type="number"
id="Longitude"
placeholder="Longitude"
value={longitude}
onChange={(e) => setLongitude(e.target.value)}
/>
</div>
</div>
<button type="submit">New Dev</button>
</Form>
);
}
