react-icons/fa#FaMinus JavaScript Examples
The following examples show how to use
react-icons/fa#FaMinus.
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: Counter.js From dm2 with Apache License 2.0 | 6 votes |
|
CounterButton = ({ type }) => {
const { currentValue, min, max, disabled, ref, onClickHandler } = useContext(CounterContext);
const compareLimit = type === 'increase' ? max : min;
return (
<Elem
tag="a"
href="#"
name="btn"
mod={{
type,
disabled: currentValue === compareLimit || disabled,
}}
onClick={onClickHandler(type, ref)}
onMouseDownCapture={e => e.preventDefault()}
>
<Oneof value={type}>
<FaMinus case="decrease"/>
<FaPlus case="increase"/>
</Oneof>
</Elem>
);
}
Example #2
| Source File: GridWidthButton.js From dm2 with Apache License 2.0 | 6 votes |
|
GridWidthButton = injector(({ view, gridWidth, size }) => {
const [width, setWidth] = useState(gridWidth);
const setGridWidth = useCallback(
(width) => {
const newWidth = Math.max(3, Math.min(width, 10));
setWidth(newWidth);
view.setGridWidth(newWidth);
},
[view],
);
return view.type === "grid" ? (
<Space style={{ fontSize: 12 }}>
Columns: {width}
<Button.Group>
<Button
size={size}
icon={<Icon icon={FaMinus} size="12" color="#595959" />}
onClick={() => setGridWidth(width - 1)}
disabled={width === 3}
/>
<Button
size={size}
icon={<Icon icon={FaPlus} size="12" color="#595959" />}
onClick={() => setGridWidth(width + 1)}
disabled={width === 10}
/>
</Button.Group>
</Space>
) : null;
})
Example #3
| Source File: NoteToolBar.js From kalimba-tabs with MIT License | 5 votes |
|
render() {
return (
<div style={styles.mainContainer}>
<div style={styles.actionContainer}>
<FaPlus
onClick={() => {
this.props.addRow(this.props.noteBarNoteIndex);
}}
/>
</div>
<div style={styles.actionContainer}>
<FaMinus
onClick={() => {
this.props.removeRow(this.props.noteBarNoteIndex);
}}
/>
</div>
<div style={styles.actionContainer}>
<FaPaste
onClick={() => {
this.props.pasteSelection(this.props.noteBarNoteIndex);
this.props.hideNoteBar();
}}
/>
</div>
<div style={styles.actionContainer}>
<FaStopwatch
onClick={() => {
this.props.noteTempoChange();
this.props.hideNoteBar();
}}
/>
</div>
<div style={styles.actionContainer}>
<FaPlay
onClick={() => {
this.props.playFromNote(this.props.noteBarNoteIndex);
this.props.hideNoteBar();
}}
color="blue"
/>
</div>
<div style={styles.actionContainer}>
<FaTimes
onClick={() => {
this.props.hideNoteBar();
}}
/>
</div>
</div>
);
}
Example #4
| Source File: CostsTable.js From plataforma-sabia with MIT License | 4 votes |
|
CostsTable = ({ item, index, form, remove, collection }) => {
const nameString = `${collection}.${index}`;
return (
<>
<Row key={item.fieldArrayId} align="center">
<input
name={`${nameString}.id`}
type="hidden"
// eslint-disable-next-line react/jsx-props-no-spreading
{...form.register(`${nameString}.id`, { required: false })}
/>
<Cell col={2}>
<InputField
form={form}
name={`${nameString}.description`}
label="Descrição"
placeholder="Descrição"
validation={{ required: true }}
/>
</Cell>
<Cell>
<SelectField
form={form}
name={`${nameString}.type`}
label="Tipo"
placeholder="Tipo"
validation={{ required: true }}
options={[
{
value: 'service',
label: 'Serviço',
},
{
value: 'raw_input',
label: 'Insumo',
},
{
value: 'equipment',
label: 'Equipamento',
},
{
value: 'others',
label: 'Outro',
},
]}
/>
</Cell>
<Cell>
<InputField
form={form}
name={`${nameString}.quantity`}
label="Quantidade"
placeholder="Quantidade"
validation={{
required: true,
pattern: {
value: /^[0-9]*$/,
message: 'Você deve digitar apenas números positivos',
},
}}
type="number"
min="0"
/>
</Cell>
<Cell>
<CurrencyInputField
form={form}
name={`${nameString}.value`}
label="Valor"
placeholder="Valor"
validation={{ required: true }}
/>
</Cell>
<Cell>
<SelectField
form={form}
name={`${nameString}.measure_unit`}
label="Unidade de Medida"
placeholder="Unidade de Medida"
validation={{ required: true }}
options={unitsOptions}
/>
</Cell>
<Cell>
<Watcher
form={form}
property={collection}
index={index}
render={(element) => {
const value =
element && element.value ? formatCurrencyToInt(element.value) : '';
const quantity =
element && element.quantity ? parseInt(element.quantity, 10) : '';
const totalPrice = (value * quantity).toFixed(2);
return (
<WatcherText>
<div>
<Price amount={totalPrice} />
</div>
</WatcherText>
);
}}
/>
</Cell>
<RightContent>
<CircularButton
name={`${nameString}_remove_button`}
size="small"
variant="remove"
shortPadding
height={1.75}
width={1.75}
onClick={(event) => {
event.preventDefault();
remove(index);
}}
>
<FaMinus />
</CircularButton>
</RightContent>
</Row>
</>
);
}
Example #5
| Source File: index.js From plataforma-sabia with MIT License | 4 votes |
|
Responsible = ({ form }) => {
const emptyValue = {
full_name: '',
email: '',
phone_number: '',
};
const { user } = useAuth();
const dataName = 'technologyResponsibles';
const owner = `${dataName}.owner`;
const users = `${dataName}.users`;
return (
<Wrapper>
<Row align="center">
<h3>Responsáveis Pela Tecnologia</h3>
<Help
id={owner}
label="Responsáveis Pela Tecnologia"
HelpComponent={<p>Adicione o nome dos responsáveis pelas tecnologias.</p>}
/>
</Row>
<Row data-testid="row">
<InputField
form={form}
name={`${owner}.user_id`}
defaultValue={user.id}
type="hidden"
/>
<Cell col={5}>
<InputField
form={form}
name={`${owner}.full_name`}
label="Nome Completo"
disabled
defaultValue={user.full_name}
/>
</Cell>
<Cell col={3}>
<InputField
form={form}
name={`${owner}.email`}
label="Email"
disabled
defaultValue={user.email}
/>
</Cell>
<Cell col={2}>
<InputField
form={form}
name={`${owner}.phone_number`}
label="Telefone"
disabled
defaultValue={user.phone_number}
/>
</Cell>
<Cell maxWidth={0.5} />
</Row>
<Repeater
form={form}
name={users}
noInitialRow
emptyValue={emptyValue}
childsComponent={({ item, index, remove }) => {
return (
<>
<Row key={item.fieldArrayId} align="center" data-testid="row">
<Cell col={5}>
<InputField
form={form}
name={`${users}.${index}.full_name`}
label="Nome Completo"
placeholder="Nome do responsável"
validation={{ required: true }}
/>
</Cell>
<Cell col={3}>
<InputField
form={form}
name={`${users}.${index}.email`}
label="Email"
placeholder="Ex.: [email protected]"
validation={{ required: true }}
/>
</Cell>
<Cell col={2}>
<MaskedInputField
form={form}
name={`${users}.${index}.phone_number`}
defaultValue={replaceWithMask(
form.getValues(`${users}.${index}.phone_number`),
'phoneNumber',
)}
alwaysShowMask={false}
label="Telefone"
placeholder="(xx) xxxxxxxxx"
validation={{ required: true }}
mask={maskPatterns.phoneNumber.stringMask}
pattern={maskPatterns.phoneNumber.pattern}
formatChars={maskPatterns.phoneNumber.formatChars}
/>
</Cell>
<Cell maxWidth={0.5}>
<CircularButton
size="small"
variant="remove"
shortPadding
onClick={(event) => {
event.preventDefault();
remove(index);
}}
>
<FaMinus />
</CircularButton>
</Cell>
</Row>
</>
);
}}
// eslint-disable-next-line no-shadow
endComponent={({ append, emptyValue }) => {
return (
<CircularButton
right
variant="info"
size="medium"
color="white"
name="technologyResponsibles.users_add_button"
onClick={(event) => {
event.preventDefault();
append(emptyValue);
}}
>
<FaPlus />
</CircularButton>
);
}}
/>
</Wrapper>
);
}
